There’s no real reason I’m aware of for not using an HTML5 DOCTYPE and HTML5 tags (with the exception of audio and video, which can be fixed). So that means the first line of any HTML document should be:
<!doctype html>
Which is reason enough to start using HTML5. But it also means that instead of structuring pages with:
<div id="header">
... <div id="nav">
<div id="content">
... <div class="post">
<div id="sidebar">
<div id="footer">You can use:
<header>
... <nav>
<article>
... <header>
... <section>
... <footer>
<aside>
<footer>Which is very exciting (and radically different from the last seven or so table–free years of markup). At last we can structure documents with real tags. There will be less <div>s in the world, which is a good thing.
Browser support
All modern browsers interpret HTML5 tags and allow CSS to style aside, header etc., and you can force Internet Explorer to join the party with a small snippet of javascript. I hotlink to some Google Code–hosted javascript by adding the following to the head section of HTML pages:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
(Note the lack of a script type. That’s one of the many great things about HTML5: It’s stripped out lots of (X)HTML verbosity, which makes it a lot more friendly.)
Which means the following browsers and user agents don’t interpret HTML5:
- Internet Explorer with javascript turned off
- Screen readers
Which isn’t a problem because one audience is going to be absolutely tiny (is there any reason to browse in IE with javascript turned off?) and the other will simply ignore the HTML5 tags (another great feature of HTML5 is the graceful degradation. Browsers adopt the standard at different rates, but most of the time the fall back option is perfectly acceptable).
Most HTML5–specific tags are currently implemented by (ab)using the virtually meaningless div (div groups bits of content arbitrarily; it doesn’t indicate why these bits of content have been grouped). As screen readers do nothing with divs it makes no difference if we use header or article instead of div id="header" or div id="content". And once screen readers start to understand HTML5 users will begin to benefit from more meaningful documents. For example, screen readers could separate navigation from content by looking at the markup contained between nav tags.
Caveat
As ever, all is not completely simple. The problem HTML5 poses to screen readers is not the introduction of a new set of tags, but in the way it handles h1-h6. In previous HTML specs, a document could only consist of 1-6 discrete headings it made sense to only use one top level heading because it would mark up the document’s title, and documents normally one have one title. So your document would use h2s, h3s et al to head other pieces of content.
In HTML5 each node can have its own hierarchy of headings (so each header, footer, article and aside can have an h1), although it doesn’t have to (HTML5 is a good friend because it’s so flexible) Looking at our traditionally marked-up page, it would be structured along the lines of:
<div id="header">
<h1>Site title</h1>
... <div id="nav">
<div id="content">
... <div class="post">
... <h2>Document title</h2>
<div id="sidebar">
<h3>Sidebar section title</h3>
<div id="footer">Whereas our HTML5 page can be structured like this:
<header>
... <h1>Site title</h1>
... <nav>
<article>
... <header>
... <h1>Article title</h1>
... <section>
... <footer>
<aside>
... <h1>Aside section title</h1>
<footer>Which is logical, but means that screen readers (which use the traditional method) just see a bunch of first level headings, which corrupts the structure of the document.
It’s difficult to suggest a way round this. HTML5 is our flexible friend, so you can continue to use a strict h1-h6 structure, but it strikes me as illogical, considering the new DOM structure which allows us to have document level footers and footers within articles.
So are you using HTML5 on a day to day basis?
Or is it still too experimental for real client work?