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>

Spacing

Spacing in Tags

Do not place whitespace between a tag's < brace and the element name.

< p >

<p>

Self-Closing Tags and Spacing

Self-closing tags may use the <tag /> or <tag> syntax. However, you must be consistent with which style you use.

<br/>
<br></br>

<br>
<br />