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.
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.
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:
<input type="email" placeholder="Your email address">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.