Style Guide

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. Put id attribute second (important if it’s defined).
  3. Everything else is alphabetical.
  4. Put data-* attributes last (alphabetical).
<div class="" id="" onclick="" data-abc="" data-xyz="">
<form class="" id="" action="" method="">


When an attribute is critical to defining an element put it first to improve readability:

<!-- The "type" defines the element's behavior. -->
<button type="" class=""></button>

<!-- Put "src" before "alt". -->
<img class="" src="" alt="">

<!-- The "type" defines the element's rendering. -->
<input type="text" class="" id="" disabled name="" placeholder="" readonly value="">

Attribute overload

When an element has too many attributes it’s hard to read. Break attributes onto lines:

    Send Coordinates

Some people probably hate that the attributes aren’t indented. I think the DOM structure is easier to scan with outdented attributes and the closing > on the last line.


Use 4 spaces (not tabs) for indentation.


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 -->

<!-- Bad -->

Void elements

Void elements don’t have a corresponding closing tag.

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

<!-- Good -->

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