HTML5 is no radical departure from it’s predecessors. It offers aids to better semantic markup and embedded content, useful form validation, and a little less depreciated cruft. Most importantly it provides the platform for CSS3, about which more in a later article. But the best thing about html5 is that you can have it now, without sacrificing browser compatibility. Take a look over here where I’ve recoded Ponderwell’s site in html5. That was an afternoon’s work, and the result was sufficiently encouraging that I think I’ll be using html5 exclusively from now on. It works just fine even in IE6 – or rather, it works as well as any site ever does in that horrible browser.
What does this involve?
First, the header now begins with:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
[/html]
The ‘<meta charset=’ definition is a little simpler, too, but the big changes are in the body markup. In html4 the page is broken into rectangles and the nesting and layout of those rectangles is controlled primarily by <div>s. This means a div has two purposes: to act as a target for css and the box model, and to thematically (hence, semantically) group objects. Semantics are perhaps provided by the id and class names assigned to a div. That semantics is therefore at least a little opaque to things like screenreaders, which would really like to be able to identify the navigation bar, for example, or the start and end of articles. An outliner would like to know the difference between a div used for organisation of the content and a div used for display of the content. And it really is good design to distinguish the semantic purpose of content from whatever deliniation is required to set it out on the screen. That, after all, is why we don’t just use inline styles for everything and why tables make a poor layout tool for non-tabular data.
HTML5 has the following tags which take the place of <div>s, have the same {display: block;} default, but provide a clue as to the document semantics:
- section
- A generic content grouping. The recommendation is that <section> be used anywhere that the section’s contents would be listed as an item in the document’s outline. It’s a content grouping, not a container element; that’s what <div> is for.
- nav
- Navigation: a group of links.
- article
- A self contained composition. The idea is that a thing which might sensibly be syndicated in a feed – even a user comment – could be marked up as an article. They can therefore be nested and they might well fall within a section.
- aside
- A sidebar on a blog, pull quotes, groups of <nav> elements, and other things tangentially related to the content which might in typography be represented as a sidebar.
- header
- Introductory or navigational aids, and typically a title, for a section or other grouping.
- footer
- Attribution, links to related material, copyright data, and so on. Headers and footers are placed within the section, surrounding the content. It would be quite possible for the footer to appear at the beginning rather than the end of the content material – it’s about meaning not placement.
These are not the only elements of semantic markup; new and very useful text level semantics include as <time> and <mark> and there are grouping and section level elements such as <figure> and ≶hgroup>, and of course embedding and graphics helpers like <video> and the famous <canvas>.
And does it all work?
Not yet. Canvas is lacking in IE, Firefox won’t play the most common html5 video encoding (H264) and Safari won’t play the patent-free one (Ogg Theora), while IE won’t play any. But the new section level markup listed above all works, with a little hack in the case of IE, and a little nudge to make it clear that these are block level elements. What that means is that it’s entirely possible to do everything we currently do in html4 using html5 instead. That means you can build a website in valid html5 markup and then add bells and whistles as browser support improves, without having to entirely re-code the markup.
The reason this all works is that browsers are very forgiving of markup they don’t recognise. When they come across <aside>, for example, they see it as a tag, track where it closes, and attach any styles to it which match. We’ll give it aside { display: block; } to make that bit clear. All except poor benighted IE, which refuses to attach styles. A little javascript, described here, solves that problem and even degrades fairly gracefully. Which makes the following a part of every html5 header until IE8 is dead:
[html]
<!–[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
[/html]
So?
So we have a choice, we can code new sites in a future proof way without a lot of effort. Simple!