Skip Links

How to use HTML5 on your website today

By Dori Smith, InfoWorld
July 12, 2010 12:02 PM ET

InfoWorld - 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. (If the code in this article doesn't display properly, go to the original article at InfoWorld.com.)

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.

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:

<input type="email">

<input type="url">

<input type="number">

<input type="tel">

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.

Originally published on www.infoworld.com. Click here to read the original story.

Our Commenting Policies
Latest News
rssRss Feed
View more Latest News