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