At last count, I believe the HTML5 specification is adding 35 new elements, give or take a couple. That’s a lot of new elements. So what, we say. After all, it’s just a bit of text in a specification.
Unfortunately, new elements are more than just a bit of text. They have to be supported in all of the user agents, and they also have to be supported in any number of other applications, including HTML editors, Content Management Systems, validators, debuggers, and so on. A new element is a costly thing, so it needs to be a needed thing. The question is: do we need all of these new elements, and attributes?
It’s an odd thing, but people seem to have developed a disdain for the lowly div element. It’s not a meaningful element, we hear. We use terms such as divitus or some variation. Poor little play dough element.
Yet the div element was never intended to be anything more than a structural construct. It’s purpose was to be attached using the class attribute, styled using CSS, controlled with JavaScript, and given meaning with WAI-ARIA, RDFa, Microformats, and Microdata. Now, however, div is out, and article/section/footer/nav…are in.
Are we taking the right path with HTML5? It’s true that we can built expectation based on an element labeled nav or article that we can’t build on div elements with class names of “nav” or “article”. At the same time, though, adding new div elements with class names doesn’t require creating a new version of HTML, or require changes to browsers and other tools.
What kind of expectation can we build on these new elements? One expectation relates to the contents and structure. According to a blog entry written by James Graham, on the WhatWG weblog[1]:
HTML 5 introduces new elements like <section>, <article> and <footer> for structuring the content in your webpages. They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. But if you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong.
This is not just semantic nit-picking, there is a practical reason to use these elements correctly.
In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).
James even provides an example:
<body>
<h1>This is the main header</h1>
<section>
<h1>This is a subheader</h1>
<section>
<h1>This is a subsubheader</h1>
</section>
</section>
<section>
<h1>This is a second subheader</h1>
</section>
</body>
Which supposedly translates to the following navigational outline:
This is the main header
+--This is a subheader
+--This is a subsubheader
+--This is a second subheader
Shiny newness…except…what about previous guidelines? As one person brought up in comments, what about the Web Content Accessibility Guidelines [2], which state to use H1-H6 to define the structure of the document?
Well, that’s old stuff. This is new stuff.
OK, it’s new, but is it better?
I look at the outline for one of my sites, which is based on the “old” XHTML+RDFa[3], and compare it with the outline for the HTML5 Doctor web site, which is based on the “new” HTML5 markup[4], using an HTML5 Outliner tool. Disregarding the different article counts, there is little different between the two. The behavior is exactly the same.
Now, it’s true, we could ask for a generic header element (<H>) and use it with section/article to create a web page with an outline five, ten, fifteen levels deep, but seriously, how useful is this? When I work on my books, we have several headers we can use to signify the depth of the section, but we’re discouraged from going beyond a depth of three levels. You can only break up your outline so much, before you make things worse.
I don’t want to just pick on section and article, or even pick on these elements. The point I’m making is that sometimes we can get so caught up in the shiny new that we don’t take time to think about what’s being offered, and to challenge it if all it does provide is new without also providing purpose.
References
[1] http://blog.whatwg.org/is-not-just-a-semantic
[2] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42
[3] http://missourigreen.burningbird.net
[5] http://gsnedders.html5.org/outliner/
