How to use HTML5 on your website today

Don't wait for the Flash-iPhone war to end: InfoWorld's hands-on guide tells you how to get your websites ready for HTML5 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.

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.
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):


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


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

and . HTML5 figures that when a preponderance of sites all have the same elements over and over, we should be using meaningful names like, well,

and

. 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:

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 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.
Smart forms. Another feature of HTML5 is smarter form elements. If you're tired of writing the same old scripts that check (again) to see if visitors entered valid email addresses (or valid telephone numbers, valid URLs, and so on), you aren't alone. It should be reasonable for browsers to handle the most common types of data entry, right? Right.
Here's the syntax:


  



What about older/lesser browsers? Here's the cute part: If they see a type attribute with a value they don't understand, they set type to its default value, text -- which just happens to be what we'd want as a fallback for each of these.
HTML5-supporting browsers can validate each of these field types to varying degrees, but you'll still want to keep those validation scripts around, at least until IE9 is ubiquitous.
If you're wondering why bother changing if you'll still need those scripts, you've never filled out a Web form on an iPhone. If you have, you've noticed the keyboard change based on the type of input required: Email addresses get an @ sign up front, telephone numbers get a keypad, and so on. All you have to do to get that functionality is to change the type attribute on your input tags.
For even more smarts, there's a new attribute: placeholder. Its value is simply the placeholder text that you often see in Web forms, but now the browser handles it for you:

The form field automatically clears itself when the cursor enters the field, and then redisplays the placeholder text if the field is empty when the cursor leaves.
What HTML5 features you can use soon
Not all of HTML5 is ready for the spotlight, for a variety of reasons (and no, they don't all have the initials "IE"). Browser support is coming, though, and here are two elements that you'll be able to use in the not too distant future.
Fancy fonts. At one point or another, every Web designer has wished that they could force every computer visiting their site to install some favorite font. With the CSS3 @font-face property, you'll have that power. The holdouts here were Firefox (before version 3.5) and Mobile Safari (before iOS 4). If you have enough visitors with those browsers, you may want to hold off for a while.
However, there's no real reason why you should be trying to make every user agent render your site identically when you can just offer different fonts to different browsers. If you want to offer custom fonts to those that can handle them, with fallbacks for those who can't, you'll want to check Font Squirrel's @font-face Generator.
Shadows and curves. Further designer-pleasing features coming down the road are text shadows, box shadows, and radial corners on boxes. Again, if you can handle your sites not rendering in a pixel-perfect identical fashion on every browser, you could start using these today. Here are some examples, with help from the CSS3 Generator.
Rounded borders (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+):

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Text shadows (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+):

text-shadow: 5px 5px 3px #CCC;

Box shadows (Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

-webkit-box-shadow: 10px 10px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
box-shadow: 10px 10px 5px #666;

What HTML5 features you'll use, someday
This category consists of elements and features that Web designers and developers have wanted for many years. Unfortunately, it may be a few more years before there's enough real-world support to be able to use them.
Brilliant forms. I referred earlier to smarter forms, which makes these new form fields downright virtuosos -- when they're widely supported.
A horizontal slider control allowing a user to move the slider to pick a number:

input type="range" min="0" max="100" step="2" value="50">

A color picker:

input type="color">

A date field (other valid values for type are month, week, time, datetime, and datetime-local):

If you need something that doesn't match any of these fields, you'll be able to create your own with RegExp (regular expression) patterns. Here's one for credit cards:

And finally, a way to tell browsers that a given field must have an entered value:

None of these tags yet have the cross-browser and cross-platform support they'll need to be usable, but when that time comes, you'll be looking forward to them.
Print-like layouts. Another CSS3 feature, which when fully implemented will add years to the lives of designers, is multiple column layouts. It's currently implemented only as test cases in Firefox and Safari.

-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;

Location detection. With the growing interest in location-based services such as Gowalla and Foursquare, it's useful for a browser to know where its user is. For obvious reasons, this was first implemented in mobile browsers, but Firefox 3.5 and Safari 5 have begun to provide support for geolocation. (Chrome's geolocation support is currently via Gears, which is in the process of being phased out in favor of HTML5.)
Working offline, with local storage. Keeping your data in the cloud is a great idea -- until you find yourself without Internet access. Or maybe you have a Web app that works with large amounts of data, more than you want to be continuously shuffling back and forth to a server. Or perhaps you have a limited data plan on your mobile device, so you want to do as much work offline as possible. Whichever the issue, the answer is to utilize offline Web applications using local storage that sync back to the cloud when you reconnect.
The browsers that currently support HTML5's ability to work offline are Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, and Chrome 4+.
Canvas, animations, and transformations. One of the promises of HTML5 has been the all-illustrated, all-animated Web, using the new canvas element and assorted CSS3 properties. Here's where things stand as of July 12, 2010:

Specification	Description	IE	Firefox	Safari	Chrome
canvas	Dynamic graphics	9	3	3.2	3
canvas text API	Displaying text on canvas	9	3.5	4	3
Transitions	Animating properties of elements (simple)	?	4	3.2	3
Animation	Animating properties of elements (complex)	?	?	4	3
3D canvas graphics/WebGL	Dynamic 3D graphics with hardware acceleration	?	4	5	5
Transforms	Rotate and scale elements	?	3.5	3.2	3
3D Transforms	Transformations through a third dimension	?	?	5	?

Key: Green = Implemented. Red = No announced plans.

Shortcuts to HTML5's bleeding edge
If you're too impatient to wait for IE8 to die of old age, there are a number of ways to skip ahead -- again, depending on what your site logs say about your visitors. For instance, Google's Chrome Frame plug-in puts an instance of Chrome into IE browsers. If you know your IE-using site visitors are likely to have GCF installed, you can then force its usage with this small addition to the head of your pages:

That, plus a little JavaScript (provided by Google) to redirect users without GCF installed, is all you may need to work around IE's limitations.
The elements listed in this article are only a few of the ones currently included as part of HTML5 or CSS3. If there's a feature you just have to start using now, chances are good there's an open source project that is figuring out how to make it work for less-capable browsers.
Many of the media reports about HTML5 have focused on the politics, the "not until 2022" sound bite, or on HTML5's prospects as a "Flash killer." The reality of HTML5 is simply that it's the long-needed and long-overdue update to HTML4 -- and you can start to implement it today.