Converting to HTML5

For one reason or another, you’ve decided to use HTML5. Whether you’re working on a new web design for your site, or just need to use a newly supported feature, you may have to convert existing code. Recently, we made the decision to try out the HTML5 video element as an alternative for devices that don’t support flash, like the iPhone and iPad. We already had a working prototype of the site in XHTML, so what I will be taking you through in this post are the steps to convert to HTML5.

Converting your document

The first step is letting the browser know that your page is now an HTML5 page. This is done by changing the doctype. The doctype for HTML5 looks like this:

<!DOCTYPE html>

And we’re done.. Well not quite, but the point here is that apart from the doctype and a few other things we will cover shortly, there’s not too much effort involved in the conversion. The beauty of HTML5 is that it supports the syntax of both XHTML and older versions of HTML. So if you’re in the habit of using XHTML syntax like I am, you can continue to do that. Unlike XHTML, it’s not case sensitive either and if you’re already writing valid code, you won’t have any problems.

HTML5 is also backwards compatible, so you can continue to support browsers that don’t have the fancy new features you want to use. However, IE does require JavaScript if you plan on using new elements, so you need to take that into consideration when deciding whether or not to use it.

A good next step is to run your document through the W3C markup validator (with experimental HTML5 support). A number of elements have been removed in HTML5, most of which are purely presentational and the same effects can be achieved with CSS. Have a look at a tag reference to see what’s removed, but validating your document will pick up any elements you need to replace.

The other change you will need to make is how you include character encoding. Your current header would include something like this:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

In HTML5, this has been shortened to:

<meta charset="utf-8">

Using the new elements

By now, you have a fully converted document and it’s time to add that feature you started all of this for. Most modern browsers will display elements that they don’t support if you tell them how, but IE won’t. This can be remedied by this HTML5 enabling script, which also adds support for printing the new elements. Add it in the head of your document like this, as it needs to run before using any of the new elements:

<!--[if lt IE 9]>    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Now you need to add CSS for any new elements that you are using, for example, when using the new section tag, make sure you style it as a block level element:

section {    display: block;}

And there you have it! Your page is now marked up using HTML5, you have a backwards compatible document, and you get to use that brand new feature you need. In future posts, I’ll cover the process and issues I encountered using the new video element, as well how to take advantage of some of the new semantic elements.

So have you had the need to convert to HTML5 yet, and what issues did you encounter?

Comments are closed.