nimblehq.co

HTML 💊

Hero image for HTML 💊

Formatting

  • Use soft-tabs with a two space indent.

  • Prefer double quotes for attributes. Even though quotes around attributes is optional, always put quotes.

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

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

    &
©

    &amp;
&copy;

Naming

Files

  • Use snake casing for file names.

    contactUs.html
contact-us.html

    contact_us.html

IDs and class names

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

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

    <div id="appContainer">

  • Use kebab case for class names.

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

    <div class="app-container">

Semantics & Markup

Principles

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

  • Pick wisely the right HTML tag. Each tag has a semantics purpose and value so respect it.

    <div class="navigation-app"></div>
<div class="main-content"></div>
<span>&copy; 2019 Nimble</span>

    <nav role="" class="navigation-app"></nav>
<main></main>
<small>&copy; 2019 Nimble</small>

  • Do NOT use empty tags for UI effect rendering. Use CSS (especially pseudo-selectors before and after) to render those effects.

    <div class="card-product">
  <img src="..." />
  <div class="shadow"></div>
</div>

<ul class="list-feature">
  <li class="list-feature__item"></li>
  <li class="list-feature__divider"></li>
  <li class="list-feature__item"></li>
</ul>

    <div class="card-product card-product--has-shadow">
  <img src="..." />
</div>

<ul class="list-feature">
  <li class="list-feature__item list-feature__item--has-divider"></li>
  <li class="list-feature__item"></li>
</ul>

Text and Lists

  • Paragraphs of text must always be placed in a <p> tag. Never use multiple <br> tags.

  • Items in list form must always be in <ul>, <ol>, or <dl>. Never use a set of <div> or <p>.

  • Use links <a> solely when redirecting 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, toggler.

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

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

  • Always add the appropriate attribute type to buttons:

    <button>Show navigation</button>

    <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 to let the browser to load the footer before a table full of data.