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. 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="">


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:

    Send Coordinates
  • 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.


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