There’s no real reason I’m aware of for not using an HTML5 DOCTYPE and HTML5 tags (with the exception of
video, which can be fixed). So that means the first line of any HTML document should be:
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.
All modern browsers interpret HTML5 tags and allow CSS to style
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:
- Screen readers
Most HTML5–specific tags are currently implemented by (ab)using the virtually meaningless
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
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
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
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
h3s et al to head other pieces of content.
In HTML5 each node can have its own hierarchy of headings (so each
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
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?