HTML5 in six steps

28 January 2013

The six steps below will take you only minutes to implement and are the first steps in adopting HTML5. Each one provides some small benefit to either you as a developer or your users.

1) Update the DOCTYPE

For many years choosing a Document Type Definition and associated DOCTYPE required a certain amount of consideration. Would you choose HTML or XHTML? If you chose XHTML would it be Transitional or Strict? Strict 1.0, or Strict 1.1? Each of those came with its own nuances. Now, it’s simple. Here is the HTML5 DOCTYPE:

<!DOCTYPE html>

That is the minimum required to make a modern browser render your page in standards mode. This is the DOCTYPE you should be using.

2) Remove the type attribute from script elements

Once upon a time you needed:

<script type="text/javascript" src="jquery.js"></script>

It turned out browsers never took the slightest bit of notice of the type attribute when it contained text/javascript, so HTML5 binned it.

<script src="jquery.js"></script>

3) Remove the type attribute from style elements

You guessed it, a link element linking to a CSS file doesn’t need a type attribute either. This does the job fine:

<link rel="stylesheet" href="bootstrap.css" />

You do still need the rel attribute however.

4) Simplify the content type meta declaration

Again, another simplified tag for the head. Remove those old convoluted content type declarations and just throw in:

<meta charset="UTF-8">

Incidentally, it’s a good practise for your HTTP response to contain a Content-Type header as well.

5) Add the placeholder attribute to inputs

For years we fiddled around using JavaScript to add and remove hints in a text input. This is now completely redundant. The placeholder attribute is supported in the latest version of every browser and older browsers simply ignore it. So don’t bother trying to support them with fallback Javascript—just move on! Incidentally, don’t forget to continue including the label element to help assistive technology out:

<label for="city">What city do you live in:
<input id="city" type="text" placeholder="e.g., London" />

6) Improve input types

A whole range of new values for the type attribute on inputs now exist. Try out:

<input type="email" />
<input type="phone" />
<input type="url" />
<input type="search" />

Browsers that don’t support these fall back to a standard text input, but browsers that do might give you a nice surprise, both with how they look and how they behave. You certainly won’t get burnt by adding this extra richness to your markup.

There are many more simple steps you can take as you continue incorporating HTML5 into your sites. It’s certainly not an all or nothing situation. Start with these, and as other features become useful you’ll be in a position to start adopting them. For further reading, I would recommend Jeremy Keith’s HTML5 for Web Designers.