Markup & Templates Styleguide

This document describes tag guidelines and markup for templates.

Doctype

A proper Doctype which triggers standards mode in your browser should always be used. Quirks mode should always be avoided.

For simplicity we will use the html5 doctype, which is easy to remember (provided by Html5Boilerplate).

        <!DOCTYPE html>
    

HTML Guidelines

  • 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 a set of <div> or <p>
  • Every form input that has text attached should utilize a <label> tag. Especially radio or checkbox elements.
  • Even though quotes around attributes is optional, always put quotes around attributes for readability.
    <p class="line note" data-attribute="106">This is my paragraph of special text.</p>
    
  • Use htmlentity number over name. Names will cause XML requests to fail. Here is a short list of common entities:

    •  , should be &#160;, not &nbsp;
    • <, should be &#60;, not &lt;
    • >, should be &#62;, not &gt;
    • &, should be &#38;, not &amp;
    • , should be &#8230;, not &hellip;
    • , should be &#8211;, not &ndash;
    • , should be &#8212;, not &mdash;
    • , should be &#8216;, not &lsquo;
    • , should be &#8217;, not &rsquo;
    • , should be &#8220;, not &ldquo;
    • , should be &#8221;, not &rdquo;
  • For apostrophes in word contractions, use the right single quote &#8217; entity.
  • Make use of <thead>, <tfoot>, <tbody>, and <th> tags (and Scope attribute) when appropriate. (note: <tfoot> goes above <tbody> for speed reasons. You want the browser to load the footer before a table full of data.)
    <table summary="This is a good table example.">
        <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>