If you want To start using HTML5’s new structural elements today, there’s nothing stopping you. Most browsers will allow you to style the new elements. It’s not that browsers actively support these elements, it’s just that most browsers allow you to use and style any element you care to invent.
Browsers won’t apply any default styling to the new elements. So, at the very least, you will want to declare that the new structural elements should force a line break:
section, article, header, footer, nav, aside, hgroup {
display: block;
} That’s enough for most browsers. Internet Explorer has special needs. It resolutely refuses to recognize the new elements unless an exemplar of each element is first created with JavaScript, like this:
document.createElement('section'); JavaScript genius Remy Sharp has written a handy little script that generates all of the new HTML5 elements. Load this script within a conditional comment so that it’s only served up to the needy Internet Explorer:
<!--[if IE]>
<script src=
"http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]--> Now you can style the new elements to your heart’s content.
Browsers haven’t yet begun to support HTML5’s new outline algorithm but you can still start using the extra heading levels available to you.
Geoffrey Sneddon has written a handy online tool that will generate an outline as specified in HTML5 (http://gsnedders.html5.org/outliner).
If you follow the advice in the HTML5 specification and start afresh from h1 within each piece of sectioning content, your CSS rules could get very complicated very quickly:
h1 {
font-size: 2.4em;
}
h2,
section h1, article h1, aside h1 {
font-size: 1.8em;
}
h3,
section h2, article h2, aside h2,
section section h1, section article h1, section aside h1,
article section h1, article article h1, article aside h1,
aside section h1, aside article h1, aside aside h1 {
font-size: 1.6em;
} That’s just the first three levels and it doesn’t even cover all the possible combinations of headings within sectioning content.
Fortunately, the HTML5 outline algorithm is pretty flexible. If you want to use heading levels the old-fashioned way, that won’t affect the outline in any way.
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links, all we need to do is use the nav element correctly. This will allow screen reader users to skip past navigation without us having to provide an explicit link.
That’s the plan, anyway. For now, we must make do with the technologies that browsers and screen readers support today.
Luckily for us, there is currently excellent support for ARIA (Accessible Rich Internet Applications).
At its most advanced, ARIA allows assistive technology to participate fully in all-singing, all-dancing Ajax interactions. At its simplest, ARIA allows us to specify even more semantic richness in our documents.
The most basic ARIA unit is the role attribute. You can add role="search" to your search form, role="banner" to your masthead, and role="contentinfo" to your page footer. There’s a full list of values in the ARIA specification at http://www.w3.org/TR/wai-aria/roles#role_definitions.
You can also use these role values in HTML 4.01, XHTML 1.0, or any other flavor of markup, but then your document will no longer validate—unless you create a custom doctype, which is a world of pain.
But ARIA roles are part of the HTML5 specification so you can have your ARIA cake and validate it.
You can also use the added semantics of the role attribute as styling hooks. The attribute selector is your friend. Selectors like these allow you to distinguish the headers and footers of a document from the headers and footers within sectioning content:
header[role="banner"] { }
footer[role="contentinfo"] { } Used wisely, a validator is a very powerful tool for a web designer. Used unwisely, a validator provides smug nerds with an easy way of pointing and laughing at other people’s markup.
Henri Sivonen has created a full-featured HTML5 validator at http://validator.nu/.
You don’t even need to update your bookmarks pointing to the W3C validator (http://validator.w3.org/). That too uses Henri’s parser as soon as it detects the HTML5 doctype.
If you want to start using some of the more advanced input types in HTML5, you’ll need a way of testing for browser support so that you can provide JavaScript alternatives.
Modernizr is a useful JavaScript file that will detect support for input types as well as audio, video, and canvas (http://www.modernizr.com/).
The script creates an object in JavaScript called Modernizr. By querying the properties of this object, you can determine whether the browser supports a particular input type or not:
if (!Modernizr.inputtypes.color) {
// JavaScript fallback goes here.
} Modernizr will also perform the sleight of hand that allows you to style the new structural elements in Internet Explorer—so if you use Modernizr, you don’t need to use Remy’s script as well.
It’s entirely up to you how ambitious or cautious you want to be with HTML5.
At the very least, you can take your existing HTML or XHTML documents and update the doctype to:
<!DOCTYPE html> You have just taken your first step into a larger world. Now you might as well start using ARIA roles as well; what have you got to lose?
If you’re nervous about using the new structural elements, you can still get used to the new semantics by using class names as training wheels:
<div class="section">
<div class="header">
<h1>Hello world!</h1>
</div><!--/.header -->
</div><!--/.section --> Further down the road, when you’re feeling more confident about using new HTML5 elements, you can replace those div elements and class names with the corresponding structural elements.
While it might still be too early to use some of the more advanced input types such as date, range, and color, there’s no harm in using search, url, email and other simple input types. Remember, browsers that don’t recognize these values will simply treat the input as if it were type="text".
If you’re feeling adventurous, you can start playing around with audio, video, and canvas. They might not be ready for prime time, but they could be fun toys to experiment with on your personal site.
I often write about HTML5 on my personal site: http://adactio.com/journal/tag/html5
I’m not the only who’s excited about HTML5. The mighty Bruce Lawson is also jotting down his thoughts: http://brucelawson.co.uk/category/html5/
Bruce is just one of the contributors to HTML5 Doctor, an excellent community resource packed with great articles: http://html5doctor.com/
If you fancy getting into the more complex side of HTML5, Remy Sharp is pushing the boundaries: http://html5demos.com/
Mark Pilgrim has written an exhaustive book called Dive Into HTML5. Buy it from O’Reilly or read it online: http://diveintohtml5.info/
For those occasions when you need to go straight to the source, keep the HTML5 specification on speed dial: http://whatwg.org/html5
The HTML5 specification includes a lot of information intended for browser makers. The W3C hosts an up-to-date version of the specification specifically for authors: http://www.w3.org/TR/html-markup
As you embark on your adventure in HTML5, you may find parts of the specification confusing. That’s okay. It’s more than okay; it’s very valuable feedback.
There are some very smart people working on HTML5, but web designers are under-represented. Your perspective would be greatly appreciated.
You can join the HTML Working Group at the W3C as a public invited expert—ignoring the Kafkaesque language of an invitation you need to issue to yourself—but I wouldn’t recommend it. The associated mailing list has a very high volume of traffic, most of it related to politics and procedure.
The WHATWG mailing list is the place to go if you actually want to discuss the HTML5 specification: http://www.whatwg.org/mailing-list#specs
There’s also an IRC channel. Sometimes you want to go where everybody knows your handle: irc://irc.freenode.org/whatwg
Don’t be shy. The IRC channel is a great place to ask questions and get answers from Ian Hickson, Anne van Kesteren, Lachlan Hunt, and other WHATWG members.
I hope that this little sashay ’round HTML5 has encouraged you to start exploring this very exciting technology. I also hope that you will bring the fruits of your exploration back to the WHATWG.
HTML is the most important tool a web designer can wield. Without markup, the web wouldn’t exist. I find it remarkable and wonderful that anybody can contribute to the evolution of this most vital of technologies. Every time you create a website, you are contributing to the shared cultural heritage of the human race. In choosing HTML5, you are also contributing to the future.