Article
Yes, You Can Use HTML 5 Today!
article
article represents a standalone part of your content. According to the spec, an article could be “a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.”
What’s particularly interesting from the point of view of a blog is that a user-submitted comment is an article too, so you would nest each comment inside the post’s article element. The spec also says:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.
Here’s the markup for an article with two comments:
<article>
<header>
<h1>Header for article 2</h1>
<p>Posted 14 June 2009</p>
</header>
<p>article 2</p>
<article>
<p>Comment 1</p>
</article>
<article>
<p>Comment 2</p>
</article>
<footer>Posted in the "trains" category
by Thomas T. Tang-Kenjin</footer>
</article>
Our fourth example shows comments within a blog entry.
aside
We left aside out of our basic example. It’s a useful if confusing beast: I’ve seen people assume it’s the way to mark up a sidebar, which on a web page is usually a navigation menu and thus best marked up with nav.
On the topic of aside, the spec says:
“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography … The element can also be used for typographical effects like pull quotes.”
figure and legend
The figure element is often used to wrap a picture and a caption, called legend, and therefore associates them. The spec says it may be:
… used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.
Let’s see one in action:
<figure>
<img src="bruce-lawson.png">
<legend>Bruce Lawson, a sort of modern-day Clark Gable
<small>Photo copyright Bruce’s mum, all rights reserved</small>
</legend>
</figure>
You’ll note that I’ve also used the small element—unlike HTML 4, this is defined as a way to represent “legalese describing disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution.” In other cases, figure is remarkably close to the aside element—too close in my opinion.
section
The section element divides the page if there are no more appropriate structural tags above. It’s more than just another kind of div, though—section imposes a kind of hierarchy upon the content. In a purely HTML 5 world, you only use h1 (for backwards compatibility), and the outlining algorithm works out the heading level from its context within the page’s sections.
So:
<body><h1> is a heading 1
<body> … <section><h1> is a heading 2
<body> … <section><section><h1> is a heading 3, and so on.
In this way, you can have more than six levels of heading. However, it’s best to continue to use h1-h6 for now, with sections if you choose. Assistive technologies such as screen readers have yet to catch up to the new outlining algorithm, and a proper hierarchy of headings is vital for blind users to navigate pages.
New Features for Web App Developers
With HTML 5’s emphasis on web application development, there’s plenty of new features for developers to use, some of which we can use today:
- A 2D drawing API for scripting graphics using the new
canvaselement, which is supported in all the major browsers except for Internet Explorer. registerProtocolHandlerandregisterContentHandler, which allow web applications to register for certain protocols or MIME types. Both are available in Firefox.- A manifest caching mechanism to support offline web applications, available in Firefox and Safari.
- Video and audio APIs. The majority of the API works in Firefox, Opera (experimental build), and Safari—although Safari only uses Apple’s proprietary .mov format, rather than the open-source Ogg formats supported by Firefox and Opera.
window.postMessage: cross-document messaging implemented in all major browsers.history.pushStateto enable better back-button support in Ajax apps. (No implementations yet, butwindow.onhashchangeis supported in IE8.)- A drag and drop API with a
draggableattribute, supported in Firefox 3.5. - An editing API that hooks into the
contenteditableattribute allowed on any element, already in all major browsers. - Client-side persistent storage using key/value pairs and support for embedded SQL databases: key/value pairs are in Firefox, Safari, and IE8, while SQL is supported only in Safari at this point.
(Note that browsers are adding support thick and fast—this is a snapshot at June 2009. Expect it to change month-by-month.)
Forms
An exciting development in HTML 5 is in the realm of Web forms. For space reasons, we’re unable to cover forms in any great detail. However, if you’re using Opera 9.6, check out my forms demo—Opera is currently the only browser with full support—to see how the browsers will validate required fields, datatypes such as email, URLs and any pattern without JavaScript. You’ll also see that the browser can now natively provide a date selection calendar, and set autofocus against a field. Be sure to view the source to see how it was put together. When broader support for these elements is introduced, we’ll be able to start playing with these too.
Become Involved—Have Your Name in Lights!
Hopefully, this brief article has shown you enough of the structural aspects of HTML 5 to prove that it’s good to start thinking about it now; it’s being added to browsers and used as we speak. Sure, at the moment it’s being used mostly for personal sites, but that’s how CSS-only layouts started and now they’re mainstream. Structural elements like article or nav can be used right now, and with browsers adding support for more features all the time, now’s a great opportunity to get started with HTML 5.
If you fancy becoming more involved, there’s still time—try using it and giving feedback to the specification group via the WHAT-WG mailing lists. The editor, Ian Hickson, has put out a call for people to review the spec—looking for confusing items, typos, and other small problems. If you find one, you’ll be mentioned in the acknowledgements. There’s plenty to do, so dive in!