Skip to content

HTML

Jump to bottom
Adam Norris edited this page Mar 8, 2017 · 21 revisions

The HTML5 doctype should be declared as the first line of the document

<!DOCTYPE html>

The language attribute should be added to the HTML tag as it benefits screen readers and search engines.

<html lang="en-GB">

The character encoding needs to appear in the first 1024 bytes of the file (See W3, so it's best to place this immediately after the opening head tag.

<meta charset="utf-8">

The meta viewport tag should not include a maximum scale as this can cause issues on small screens when users may wish to zoom in to view content.

<!-- bad -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

<!-- good -->
<meta name="viewport" content="width=device-width, initial-scale=1">

HTML5 elements should be used where possible to reflect the semantic content of the document (See W3 Wiki).

<!-- HTML5 elements in use -->
<article>
  <header>
    <h1>Some Heading</h1>
    <p>A Subheading</p>
  </header>
  <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</article>

Remember that elements contain semantic meanings and should only be used for the correct context (see MDN). When marking up content purely for aesthetic purposes <div> and <span> are the right choice.

<!-- appropriate use of a div -->
<section>
  <div class="col-1>
    <h1>Some Heading</h1>
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>
  <div class="col-2>
    <p>Quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
  </div>
</section>

All tags and attributes should be written in lowercase. This helps prevents bugs and is easier to read.

<!-- It's not nice to be shouted at -->
<DIV></DIV>

<!-- better -->
<div></div>

Similarly, quote style should be consistent across the document to prevent hard to track bugs. Double quotes are preferred. See Google style guide

<!-- Inconsistent -->
<img class="hero-image" src='../img/hero-image'>

<!-- Better -->
<img class="hero-image" src="../img/hero-image">

HTML should be properly indented (including any PHP blocks)

Comments can be used to help developers navigate through the markup.

All form elements should have a label, although these may be hidden in certain cases (see accessibility section).

Many attributes don't require a value to be set like disabled or checked, so there is no need to set them.

<input type="text" disabled>

<input type="checkbox" value="1" checked>
Clone this wiki locally