How to use HTML5 on your website today

What HTML5 features you can use now?

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Which can be turned into:

<!DOCTYPE html>

<html>

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.

The HTML needed to handle this can be found at Video for Everybody, an open source project to support Web-based video using no JavaScript and no browser sniffing.

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]>

<script src=

"http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

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.

Join the newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection

Tags internethtml5html 5

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Dori Smith

InfoWorld
Show Comments

Cool Tech

Breitling Superocean Heritage Chronographe 44

Learn more >

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?