Structural engineering

HTML5 introduces an intriguing if somewhat confusing element called the section element. The HTML5 spec specifies that “the section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

The “thematic grouping of content” bit is important. What does it mean for web pages? I find it useful to think of HTML5 section elements in terms of newspaper sections. A typical newspaper consists of a news section, a sports section, a business section, maybe other sections. Each section in the paper consists of a thematic grouping of content — news articles, sports articles, business articles.

A newspaper web page could look like this:

<h1>The Daily Planet</h1>

<section>

<h1>News</h1>
News articles…

</section>

<section>

<h1>Sports</h1>
Sports articles…

</section>

This is where I would tell Neo to buckle up because Kansas is going bye-bye. Notice how two h1’s follow each other (“The Daily Planet” and “News”), but the headings represent different levels in the structure of the document. HTML5 browsers and other user clients interpret the outline of the document as follows:

The Daily Planet
   News
   Sports

Whoa. In HTML5, you structure content groupings with sections instead of traditional heading elements. If you want to create sub-groupings, forget h2 or h3. Instead, nest sections in other sections as follows:

...
<section>

<h1>News</h1>

<section>

<h1>Local news</h1>
Local news articles…

</section>

<section>

<h1>National news</h1>
National news articles…

</section>

<section>

<h1>International news</h1>
International news articles

</section>

</section>

The updated table of contents of our online newspaper looks as follows:

The Daily Planet
   News
      Local news
      National news
      International news
   Sports

I used h1 headings for every level in the structure of the document. As the HTML5 Spec notes, “the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.”

For more information on the section element, see the WHATWG’s HTML5 Edition for Web Developers at http://developers.whatwg.org/sections.html#the-section-element.