Home Indentation and Spacing in HTML
Indentation
Spacing and indentation should be consistent throughout your code. Many developers choose to use 4-space or 2-space indentation. In HTML, each nested tag should be indented exactly once inside of its parent tag.
Here is an example of bad indentation in HTML:
<p>I am a paragraph! </p> <p>I am another paragraph! </p> <p> <h2> I am a heading inside of a paragraph! </h2> </p>
Here are some examples of good indentation in HTML:
<p>I am a paragraph!</p>
<p>
I am another paragraph!
>/p>
o
<p>
<h>
I am a heading inside of a paragraph!
</h>
>/p>
Place a line break after every block element. Do not place more than one block element on the same line.
<!-- bad --> <p>Hello, how are you</p> <p>I am fine</p>
<!-- good --> <p>Hellow, how are you</p> <p>I am fine</p>
Nesting Tags
Close tags in the opposite order in which they were opened.
Always nest every inline element inside of a block element.
(For example, don't just put an <a> tag directly inside the
body; instead, place it inside a p or li
or other block-level element.
Line Formatting
Long Lines
We permit long lines, but never begin a block element past character index 100 on a given line. When any line is longer than 100 characters and you need to begin a new block lelement, break it into two lines.
Blank Lines
Place a blank line between sections of the page and between large elements contain a lot of content. You should not have more than one blank line in a row.
You should not use <br /> for the purpose of adding verticle spacing between elements. This tag is used solely for line breaks within a paragraph, and you should not use more than one in a row.
<p>Hello, how are you</p> <br /> <!-- line breaks should not be placed outside of <p> tags --> <p>I am fine</p> <p>Hello, <br /> <br /> <!-- you should not have two or more line breaks in a row --> how are you</p> <p>I am fine</p>
<p>Hello, <br /> how are you</p>