HTML 💊

• Formatting
• Naming
  • Files
  • IDs and class names
• Semantic & Markup
  • Keep it simple
  • Links and Buttons
  • Forms
  • Tables

Formatting

• Use soft-tabs with a two space indent.
• Paragraphs of text should always be placed in a <p> tag. Never use multiple <br> tags.
• Items in list form should always be in <ul>, <ol>, or <dl>. Never use a set of <div> or <p>.
• Prefer double quotes for attributes. Even though quotes around attributes is optional, always put quotes.

# Bad
<form method='post' class='form-inline'>

# Good
<form method="post" class="form-inline">

• Many attributes don’t require a value to be set, like disabled or checked, so don’t set them.

<input type="text" disabled />

<input type="checkbox" value="1" checked />

<select>
  <option value="1" selected>1</option>
</select>

• Avoid writing closing tag comments to delimit HTML blocks like <!-- /.element -->. This just adds to page load time. Plus, most editors have indentation guides and open-close tag highlighting.
• Prefer the HTML Escape version of characters over their symbol

# Bad
&
©

# Good
&
©

Naming

Files

• Use snake casing for file names:

# Bad
contactUs.html
contact-us.html

# Good
contact_us.html

IDs and class names

• Use camel case for IDs to differentiate it from class names

# Bad
<div id="app-container">
<div id="AppContainer">

# Good
<div id="appContainer">

• Use snake case for class names

# Bad
<div class="appContainer">
<div class="AppContainer">

# Good
<div class="app-container">

Semantic & Markup

Keep it simple

Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML.

<span class="user-avatar">
  <img src="..." />
</span>

# Better
<img class="user-avatar" src="..." />

Links and Buttons

• Use links <a> solely when you need to redirect to another page or section. As a consequence it must contain an href attribute.
• Use buttons for everything else e.g. form submission, interactive components e.g. dropdown, tabs, toggle.

# Bad
<a href="#">Show navigation</a>
<a href="javascript:void">Show navigation</a>

# Good
<button type="button">Show navigation</button>

• Always add the appropriate attribute type to buttons:

# Bad
<button>Show navigation</button>

# Good
<button type="button">Show navigation</button>

Forms

• Form inputs that has text attached must utilize a <label> tag. Prefer the wrapping format for radio and checkbox inputs as clicking the label toggle the state of the input which is a UX win.

# Label wrapping format
<label>
  User Name
  <input id="username" type="text" />
</label>
<label>
  You accept the terms and conditions?
  <input id="username" type="checkbox" />
</label>

# Unwrapped label format
<label for="username">User Name</label>
<input id="username" type="text" />

• Form buttons must always include an explicit type. Use primary buttons for the type="submit" button and regular buttons for type="button".
• The primary form button should come first in the DOM, especially for forms with multiple submit buttons. The visual order should be dealt with in CSS.

Tables

Make use of <thead>, <tfoot>, <tbody>, and <th> tags (and scope attribute) when appropriate.

<table summary="This is a chart of invoices for 2011.">
  <thead>
    <tr>
      <th scope="col">Table header 1</th>
      <th scope="col">Table header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table footer 1</td>
      <td>Table footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table data 1</td>
      <td>Table data 2</td>
    </tr>
  </tbody>
</table>

<tfoot> goes above <tbody> for speed reasons. You want the browser to load the footer before a table full of data.