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>
<p>
<h2>
I am a heading inside of a paragraph!
</h2>
</p>
Place a line break after every block element. Do not place more than one block element on the same line.
<p>Hello, how are you</p> <p>I am fine</p>
<p>Hello, 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
You should not have any lines that are longer than 100 characters in your HTML code. When any line is longer than 100 characters, break it apart into multiple lines.
Exception: When using a long url, you may keep it on one line if it is longer than 100 characters (breaking apart a url is worse style than having this exception for long 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 vertical 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>