The How & Why of Converting to HTML5

2010-08-26

Page content

Is it feasible?

Apple’s decision to support HTML5’s multimedia capabilities over the more popular Adobe Flash has perhaps made the biggest splash in favor of the new web standard. With browsers touting their support for it and many video sharing sites like YouTube implementing it, HTML5 seems all the rage these days.

But first let’s talk about whether or not you really need HTML5 right now.

It’s obviously the future of web design and development, it offers great features and takes some of the bite out of the developer’s job – but is it feasible? Should you run out and change all your websites to HTML5 right away?

Well, not exactly. The first thing to realize is that it is in no way a requirement. XHTML1.0 and even HTML4 have been serving perfectly well for the last decade or so and there’s no need to suddenly give in to the hype just because everyone else is doing it.

The decision to convert needs to take several things into account; such as development costs and most importantly, browser support. Even after the HTML5 specs are finalized, browser vendors will take some time to catch up. Each new browser release adds more support for the various new features in the new HTML spec sheet, but many versions currently have buggy or no support for several of the most exciting things, such as editable content and video.

The new HTML5 features may be moot depending on what type of browsers your average site visitors use so it’s a good idea to look over your site statistics to gauge what type of audience you get. The worst culprit is of course IE6, with next to no support for HTML5 – it is a nine year old browser after all! You can take a look at this frequently updated chart to see which browser version supports which spec, or you can test your own browser.

To sum up, yes you can use HTML5 right away, but as always, think before you leap.

Even with this seemingly crippling blow, there are ways to ensure graceful degradation. Each section below will highlight its own compatibility report.

Cleaning Up

HTML5 is all about clean, efficient and semantic code. The first thing you see when looking at our example XHTML page is the ugly DOCTYPE declaration, which flies directly in the face of our noble goals. Here it is again:

DOCTYPE declarations have always annoyed many a web developer. They’re impossible to memorize and very easy to mistype. But they are absolutely necessary to ensure proper rendering across all browsers and as such need to be the first thing on any webpage. Good thing the DOCTYPE in HTML5 is a little better:

And that’s it!

Next up is the tag. Right now it looks like this:

The xmlns (XML Namespace) is unnecessary in HTML5 because it is assumed to be true even if not explicitly stated; therefore it can safely be removed.

In the section we have some character set information and a link to the CSS stylesheet. And of course, the title. First up is the charset tag, which can be shortened to simply

Then we have the stylesheet link. You’ll notice it explicitly defines itself as a CSS stylesheet; but what other kinds of stylesheets are there, really? None! So the type attribute can be discarded to make

The same goes for JavaScript links; you can safely remove the type attribute.

You can make any of the above changes right now without having to worry about browser compatibility or rendering issues. Over a large project, the (seemingly) small changes made above can also help reduce file size and in turn server load and bandwidth usage.

The Semantics

So far all the changes we’ve made to our HTML page have been about removing clutter and making our code easier to read, write and maintain.

The changes we are now going to make are about semantics, i.e. making our code make more sense. This is perhaps a little more exciting than cleaning up existing code, but comes with a small, rather annoying caveat. Let’s convert the page first.

First up we have the header that contains a logo and navigation links. As you can see, we’re using additional s with appropriate IDs.

My Awesome Site

Home

About me

Email me!

Let’s get semantic on its…err…head. That becomes this:

My Awesome Site

Home

About me

Email me!

Doesn’t that make more sense? A contains our title (the logo) and our page .

After that there’s the main that holds our page content and a sidebar for additional links. Here’s what the HTML5 would be:

Extra links, additional information, secondary navigation etc.

Content title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget bibendum sapien. Nulla aliquet hendrerit suscipit. Vivamus consectetur consequat purus non laoreet. Suspendisse mattis placerat dolor, at gravida mi mattis ut. Maecenas egestas gravida turpis non molestie.

You’ll notice here and above, I’m still using s; there’s nothing wrong with that! A still means what it did before HTML5 – a division. It’s just that with HTML5 we have more semantic tags to replace some of the s in our designs.

Then comes the footer, which naturally turns into this:

So here we have it. A rather smart looking, semantic and tidy HTML5 page. We’re almost done, but there’s one problem left to be dealt with. Head over to the next page to see it and the simple solution.

The Problem

Since the new tags available in HTML5, such as , , and are new, old browser versions don’t recognize them; and since each browser has its own way of dealing with unknown elements, this can potentially cause our new HTML5 page to break miserably, especially in Internet Explorer.

To illustrate, let’s look at the following code:

A Simple Page

body { width: 700px; margin: 0 auto; }

header { border: solid 2px red; }

article { margin-right: 270px; }

aside { float: right; width: 250px; background: #efefef; }

footer { clear: both; background: #000; color: #fff; }

My Awesome Site

Home

About me

Email me!

Extra links, additional information, secondary navigation etc.

Content title

The only thing different here from our completed document on the previous page are the CSS styles. Here’s what it looks like in Google Chrome.

html5-chrome

Excuse the shoddy design, please.

But look at it in IE6 (or for that matter, even in IE8), it looks very strange. Almost as if no CSS had been applied!

in IE6

Why is that happening, you ask? Because the CSS styles were set for , and , which IE (up to version 9) does not recognize, and so does not render properly. IE has a very large market share and cannot be ignored – even now many people are still using IE6 (which was released in 2001) and even with the coming release of IE9, this problem will not likely go away.

The Solution

So how do we fix it? For IE version 7 and 8, Firefox 3 and Opera 10, a single CSS rule will do the trick. Chrome, Safari and other Webkit browsers don’t have this problem to begin with.

header, nav, article, footer, aside, address { display: block; }

However, to fix the issue in IE6 we will also need some JavaScript.

<!–[if lt IE 9]>

document.createElement(“article”);

document.createElement(“footer”);

document.createElement(“header”);

document.createElement(“aside”);

document.createElement(“nav”);

<![endif]–>

What this basically does is create fake DOM elements (only in IE thanks to the conditional tags), which allows proper rendering of CSS styles.

To make things even easier, Remy Sharp released a thorough HTML5 enabling script which you can include in your pages. The advantage of using Remy’s script is that it’s cleaner, more thorough and also fixes an issue where printing the elements does not work. To use it, simply replace the above JavaScript with this:

<!–[if lt IE 9]>

<![endif]–>

And with that, you’re done. Cross-browser compatible, semantic HTML5. Doesn’t it feel good?

Looking Back

This article has been about converting our web page to HTML5. We started by talking about whether or not it’s even a good idea and looked over some browser-compatibility charts. Then we tidied up our “messy” page with clean HTML5, replaced simple s with proper, semantic tags and later fixed an issue for older browsers with CSS and some JavaScript.

Before you start the process on your own website, think about the type of audience your site gets and what sort of browsers they tend to use. For example if the majority of your visitors have JavaScript disabled for some reason, then it would be a bad idea to go ahead with the conversion. Some of the more advanced features HTML5 has to offer such as video and graphics have sketchy support even in the latest browsers, so more caution is needed when implementing them.