<p>
tag. Never use multiple <br>
tags.<ul>
, <ol>
, or <dl>
. Never use a set of <div>
or <p>
.<label>
tag. Especially radio or checkbox elements.<!-- /.element -->
. This just adds to page load time. Plus, most editors have indentation guides and open-close tag highlighting.<br>
, <hr>
, <img>
, and <input>
.tabindex
manually—rely on the browser to set the order.<p class="line-note m-0" data-attribute="106">This is my paragraph of special text.</p>
Many attributes don't require a value to be set, like checked
, so don't set them.
<input type="checkbox" value="1" checked><select><option value="1" selected>1</option></select>
For more information, read the WhatWG section.
Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example:
<!-- Not so great --><span class="avatar"><img src="https://github.com/github.png"></span><!-- Better --><img class="avatar" src="https://github.com/github.png">
<label>
s. No need for for
attributes here—the wrapping automatically associates the two.type
. Use primary buttons for the type="submit"
button and regular buttons for type="button"
.float: right;
on each button.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 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>