Trinity - HTML Standards

HTML Standards

HTML5 Elements

HTML5 Doctype

We make use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your pages.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Boolean Attributes

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>

Lists

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

Forms

Every form input that has text attached should utilize a <label> tag. Especially radio and checkbox elements.

HTML5 Styling

Lean Markup

Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. This will help with SEO performance, particularly for content-lite pages.

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

HTML Quotation Marks

Even though quotes around attributes is optional, always put quotes around attributes for readability.

When quoting attributes values, use double quotation marks ("") rather than single quotation marks ('').

Type attributes for scripts & stylesheets

Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript).

Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.

Comments

Avoid writing closing tag comments, like >. This just adds to page load time. Plus, most editors have indentation guides and open-close tag highlighting.