How to use HTML5 on your website today
- — 13 July, 2010 01:44
There's been lots written about the politics and process of the emerging HTML5 specification (see "What to expect from HTML5" and "How HTML5 will change the Web," as just two examples), but what working Web developers primarily want to know is: What can I do with HTML5, and when can I start using it? The good news is that there's a lot you can do with HTML5. The better news is that there's a lot that you can do with HTML5 today.
But first, one major caveat: You need to know your audience, though, of course, this is true whether or not you want to start using HTML5. If the majority of your site's visitors still use Internet Explorer 6, then you have no reason to rush. On the other hand, if your site is primarily for mobile browsers on iPhones and iPads, what are you waiting for? But if your site falls somewhere in the middle -- as most do -- here are some handy guidelines to ramping up to HTML5.
[ Read Neil McAllister's primer: "What you can expect from HTML5." | Find out InfoWorld's peace plan for ending the iPhone's HTML5-versus-Flash war. ]
What HTML5 features you can use now
Although the HTML5 specification is still a draft being worked on by a standard committee, significant portions are already deployed in Apple Safari, Google Chrome, Mozilla Firefox (with more to come in Firefox 4), and Opera -- and the forthcoming Microsoft IE9 is expected to adopt much of the draft HTML5 specification as well. The When Can I Use site is a great resource, providing detailed breakdowns of what each major browser supports for HTML5 and related emerging Web standards.
Browser Security Deep Dive
Another site, The HTML5 Test, displays compatibility scores, based on the number of supported HTML5 capabilities (out of 300), for each browser (you need to visit the site in each browser you want scored). As of June 12, 2010, the scores were:
* Apple Safari 5.0: 208
* Google Chrome 5.03: 197
* Microsoft IE7: 12
* Microsoft IE8: 27
* Mozilla Firefox 3.66: 139
* Opera 10.6: 159
There's clearly a core of HTML5 features that all the major non-IE browsers do support, which could allow "draft HTML5" websites to be deployed to a large segment of the Web-using population.
Starting from the top. You can use HTML5's doctype now; there's no reason not to. You can even do a mass find and replace throughout your site, looking for (for instance):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Which can be turned into:
Isn't that considerably clearer and more straightforward? If browsers rendered your pages as standards-compliant before, they will still do so afterward.
Get moving with video. Much of the press about HTML5's video tag has been about the current format battles. There are four competitors -- Flash, H.264, Ogg, and WebM -- all of which hope to be the format of the future, and none of which play in all browsers on all platforms. Sadly, it doesn't appear that browser vendors will agree on a common future format any time soon.
Given that news, it's perfectly reasonable to jump to the conclusion that the video tag isn't ready for prime time. But wait: The bright folks behind HTML5 foresaw this and made video format-independent. In fact, because video can contain multiple source tags, it ends up working out rather well. If your browser doesn't support the first option, it tries again with the second, then again with the third, and so on. It's even valid to fall back to Flash and again to a single image.
Semantically speaking. One of the biggest changes coming in HTML5 is semantically meaningful tags. Chances are, your site is full of tags like <div id="header"> and <span class="nav">. HTML5 figures that when a preponderance of sites all have the same elements over and over, we should be using meaningful names like, well, <header> and <nav>. And of course, we should then use CSS (cascading style sheets) to style those elements.
But wait, you say: No version of IE has ever shipped with support for these elements, and that's a huge chunk of people! Does that mean we're out of luck? Thankfully, there's a work-around here as well; all you have to do is paste this snippet into the head section of each of your pages:
<!--[if lt IE 9]>
HTML5 Shiv is an open source project based on a simple discovery: If you create a new DOM element in IE, you can then style any elements with that name. That is, once you create a new DOM element like this: document.createElement("foo");. You can then add any number of <foo> tags to your page, and IE will style them. HTML5 Shiv contains a list of all the HTML5 tags that IE doesn't (yet) know about and creates them one by one, allowing you to then use and style them to your heart's content. Here are a few of HTML5's new semantic tags to get you started: article, section, header, footer, and nav.