Get up-to-date with HTML5


What's the big deal?

HTML5 has introduced a lot of new functionality to the web. All major web browsers now support HTML5 (although unofficially), and most older browsers are "backwards-compatible", so there really is no sense making a new site with old semantics. If you're concerned about people visiting your site with a non HTML5 browser, don't be. Most major browsers update automatically, and for those that don't (namely Internet Explorer) there are fall-backs available to make them compliant with HTML5 semantics [1].

How to update your site to HTML5

HTML5 is fully backwards compatible with HTML / XHTML, all you need to do is update your DOCTYPE to the new HTML5 declaration as shown below, and you're done! Once you have an HTML5 declaration, you can add any new HTML5 attributes to your website straight away. Simple.

HTML5 vs HTML 4.01

There are significant advantages to HTML5, not only do you get more functionality, but also significantly less HTML is required compared to the previous HTML 4.01 standard. This means reduced source file size, and therefore reduced page-loading times. Take a look at the comparison between markups below.

				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example HTML 4.01 document</title>
<link type="text/css" rel="stylesheet" href="/theme/stylesheet.css">
<script type="text/javascript" src="/js/javascript.js"></script>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
				<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example HTML 5 document</title>
<link rel="stylesheet" href="/theme/stylesheet.css">
<script src="/js/javascript.js"></script>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

This is an example of a simple web page, both markups shown above are fully valid HTML. The DOCTYPE declaration with the old HTML 4.01 specification required a reference to a DTD file hosted by the W3C. This is no longer required in the HTML5 specification, and so the new DOCTYPE declaration is much shorter. The easiest way to identify the markup language of any website is by looking for the DOCTYPE at the beginning of the page source.

HTML type tags

Another reduction in source file size can be earned by removing the type="text/css" and type="text/javascript" tags from files included within the head section (or indeed elsewhere on the page). Most people are not aware of this new benefit, and so the tags are commonly found to be present on new HTML5 websites, and that's fine, but isn't required in the current draft of HTML5. Don't worry; in most non-HTML5 browsers the <link> tag falls-back to CSS by default, and the <script> tag falls-back to JavaScript. You only need to specify the type tag if you require something other than the default.

Common HTML5 mistakes

The biggest mistake I find on HTML5 websites is the overuse of new HTML5 elements in place of DIVs. There is absolutely nothing wrong with DIVs, they are very short tags and can be styled any way you like. Avoid using <section> as a styling element; it is not a wrapper, and should not be used as such.

Be careful with HTML5 elements, while they can be a very powerful replacement for HTML 4.01 elements; there are some compliance issues to think about. Internet Explorer version 8 and below do not understand HTML5 elements, and will very likely render them incorrectly. Fortunately this problem has been addressed; thanks to html5shiv.

The html5shiv JavaScript library is a great solution to get IE to render HTML5 correctly. However you do not need to use html5shiv if you do not use HTML5 elements to structure your website, and a lot of the more advanced HTML5 elements will not work at all in non-HTML5 browsers, so there's no-point placing it in the head of every page, unless your site is structured with <nav>, <article>, <section>... or other such HTML5 elements. If you're unsure, use DIVs instead; they are still perfectly valid in HTML5. For more information on dealing with IE, see this article.

Article Updated: Mon 20th Apr 2015