You can indent elements by moving them two spaces to the right. When writing HTML it is important to properly format your code using good indentation. This is much easier to read and now we can see all of the nested child elements inside their parent elements and understand what the code is doing. Now I am going to take that exact same code and properly indent it to show you the difference. If you tried to submit something like this in a professional developer setting, your team would not be happy with you at all. ![]() This is not good HTML practice at all because it is really difficult to read and understand what the code is doing. In this example, I have copied all of the code from the Learn HTML by Building a Cat Photo App project and removed all of the indentation to show you what poor code formatting looks like. A large part of readability is properly indenting your HTML. When you are writing code, it is important to write code that is readable by other developers. ĭrive 1.2 miles and turn left on Cherry laneĭrive 4.5 miles and turn right on Sycamore Rd. The ol element is the parent of the li elements. The li elements are indented two spaces to the right and nested inside the ol element. The ul element is the parent of the li elements. The li elements are indented two spaces to the right and nested inside the ul element. Commonly Used Examples of Indentation in HTML Unordered lists The h2 and p elements are children of the main element. īut if I edit the code by moving the h2 and p elements two spaces to the right, now we have proper indentation. In this next example, I have an h2 and p element nested inside a main element without indentation. ![]() Now we can see that the p element is nested inside its parent element which is the div. This is considered best practice and will make your code more readable by other developers. This is what indentation looks like for HTML To indent the p element, I will move it two spaces to the right. In this example, I have a p element nested inside a div element. Nested elements are known as children of their parent element. Whenever you have HTML elements nested inside other HTML elements, it's best to use indentation. In this article, I will show you how to properly indent your HTML files and explain why it is important to properly format your code. But how do you do that in HTML and why is it important? This ability to perceive as a paragraph break provides for continuity with HTML, and allows authors to graduate to treating it as a container in their own time.When you are building out HTML files, it's really important to indent your code. If the paragraph style includes a blank line between paragraphs, then additional care is needed after headers and other major elements *2 to avoid inserting an unwanted blank line, e.g. Note that when using explicit line breaks (see Section 5.12) you may wish to switch off word wrap with WRAP=OFF.īrowsers, when parsing paragraphs, can choose to simply treat the tag as denoting a paragraph break. This attribute is a hint and may be ignored by some browsers. Other possibilities are ALIGN=left (the default), ALIGN=right, ALIGN=justify and ALIGN=indent. The ALIGN attribute can be used to center a paragraph, e.g. ![]() You can force line breaks in normal paragraph text with the element, but the browser may wrap lines arbitrarily at window margins prior to reaching the element. In some situations you will want to preserve the original line breaks and spacing, for this you should use the LIT or PRE elements, these are described in a later section. The following samples of HTML+ all produce exactly the same results when displayed: This works since HTML+ formally doesn't require you to wrap text up as paragraphs. If you wish, you may think of the tag as a paragraph separator. You don't need to give the end tag as it is implied by the context, e.g. The P element acts as a container for the text between the start tag and the end tag. This works since HTML+ formally doesn't require you to wrap If you wish, you may think of thetag as a paragraph Tag as it is implied by the context, e.g. The P element acts as container for the text between the start The text is generally shown in a proportional font: Normal text is automatically wrapped by the browser at the current window margin and adapts to changes in window size.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |