Formatting and whitespace

• Lowercase tag name.
• Lowercase attribute name.
• Use double-quotes for attribute values (not single-quotes).

<!-- Good -->
<img src="#">

<!-- Bad -->
<IMG SRC='#'>

Attribute order

Use the order of attributes to improve the developer experience (the browser doesn’t care). Simple rules:

1. Put class attribute first (developers read/write this most often).
2. Alphabetize all remaining attributes.
3. Put data-* attributes last (alphabetical with group).

<div class="" id="" onclick="" data-abc="" data-xyz="">
<form class="" action="" id="" method="">

Exceptions

When an attribute is critical to an element break the rules to improve developer readability:

<!-- Put "type" first because it changes the element's behavior. -->
<button type="" class=""></button>

<!-- Put "type" first because it changes the element's rendering. -->
<input type="text" class="" disabled id="" name="" placeholder="" readonly value="">

<!-- Put "alt" after "src" because seeing the URL is more important. -->
<img class="" src="" alt="">

Attribute overload

When an element has too many attributes it’s hard to read. Put attributes on separate lines:

<button
type="button"
class="button"
id="coordinates-button"
data-loading="Loading..."
data-x="123"
data-y="789">
    Send Coordinates
</button>

• First line is the element only.
• One attribute per line.
• Do not indent attributes.
• Last line contains the > closing angle-bracket.

Some people will hate that attributes aren’t indented. It’s better because the DOM structure is visually re-inforced. It’s easy to spot HTML nesting problems when scanning a large block of HTML with outdented attributes.

Indentation

Use 4 spaces (not tabs) for indentation.

<ul>
••••<li>Item<li>
<ul>

Optional tags

Optional tags aren’t required by the HTML spec to have a closing tag.

Always be close optional tags for readability and consistency.

<!-- Good -->
<ul>
    <li>One</li>
    <li>Two</li>
</ul>

<!-- Bad -->
<ul>
    <li>One
    <li>Two
</ul>

Void elements

Void elements don’t have a corresponding closing tag.

They don’t need a trailing slash anymore. Yeya, HTML5!

<!-- Good -->
<br>
<hr>
<img>
<input>
<link>
<meta>

<!-- Bad -->
<br />
<hr />
<img />
<input />
<link />
<meta />