What’s New in HTML5: Sectioning Elements

One new concept in the HTML5 specification is that document hierarchy is divided in to “sections.” That is, some of the new elements define new sections on the page. The upshot of this is that we can start to use headings a little differently.

Here’s a common HTML 4 / XHTML document hierarchy:

  • h1 Main Page Heading
    • h2 Sub Heading
      • h3 Sub Sub Heading
    • h2 Sub Heading
    • h2 Sub Heading
      • h3 Sub Sub Heading
        • h4 Sub Sub Sub Heading

In this example the h1 acts an an anchor and the page is divided into a hierarchy beneath it.

In HTML5 we don’t have to follow this model. Sectioning elements essentially allow us to start the hierarchy over and treat each section as a separate piece of content with it’s own hierarchy. So we can have a document structure like this:

  • header (sectioning element)
    • hgroup (sectioning element)
      • h1 Main Heading
        • h2 Page Tag Line
  • section (sectioning element)
    • h1 Main Section Heading
      • h2 Main Section Sub Heading
      • article (sectioning element)
        • h1 Article Title
          • h2 Article Sub Heading
  • aside (sectioning element)
    • h1 Aside Main Heading
      • h2 Aside Sub Heading

While the latter document structure has a few more nested elements, it’s clear semantically which headings belong to which sections. In the former document structure, the outline might continue all the way from the top of the page through the content and into the sidebar. Clearly sidebar headings are not related to the the article sub headings, so defining a true semantic hierarchy proves difficult.

It takes some mental adjustment, but in the end it makes the document structure more intuitive.

Further Reading

Comments are closed.

Web People is proudly powered by WordPress
Entries (RSS) and Comments (RSS).