The <section> element is used to define a generic section of a document or application. For example, you may choose to create sections round your content; one section for contact information, another section for news feeds, and so on. It's important to understand that it isn't intended for styling purposes. If you need to wrap an element merely to style it, you should continue to use a <div> as you would have before.

The <nav> element is used to define major navigational blocks—links to other pages or to parts within the page. As it is for use in major navigational blocks it isn't strictly intended for use in footers (although it can be) and the like, where groups of links to other pages are common.

The <article> element, alongside <section> can easily lead to confusion. I certainly had to read and re-read the specifications of each before it sank in. The <article> element is used to wrap a self-contained piece of content. When structuring a page, ask whether the content you're intending to use within a <article> tag could be taken as a whole lump and pasted onto a different site and still make complete sense? Another way to think about it is would the content being wrapped in <article> actually constitute a separate article in a RSS feed? The obvious example of content that should be wrapped with an <article> element would be a blog post. Be aware that if nesting <article> elements, it is presumed that the nested <article> elements are principally related to the outer article.

The <aside> element is used for content that is tangentially related to the content around it. In practical terms, I often use it for sidebars (when it contains suitable content). It's also considered suitable for pull quotes, advertising, and groups of navigation elements (such as Blog rolls, and so on).

If you have a number of headings, taglines and subheadings in <h1>,<h2>,<h3>, and the subsequent tags then consider wrapping them in the <hgroup> tag. Doing so will hide the secondary elements from the HTML5 outline algorithm as only the first heading element within an <hgroup> contributes to the documents outline.

The HTML5 outline algorithm

HTML5 allows each sectioning container to have its own self-contained outline. This means it's no longer necessary to think constantly about which level of header tag you're at. For example, within a blog, I can set my post titles to use the <h1> tag, whilst my blog title itself also has a <h1> tag. For example, consider the following structure:

<hgroup>
      <h1>Ben's blog</h1>
      <h2>All about what I do</h2>
    </hgroup>
      <article>
        <header>
          <hgroup>
            <h1>A post about something</h1>
            <h2>Trust me this is a great read</h2>
            <h3>No, not really</h3>
            <p>See. Told you.</p>
          </hgroup>
        </header>
      </article>

Despite having multiple <h1> and <h2> headings, the outline still appears as follows:

• Ben's blog
  • A post about something

As such, you don't need to keep track of the heading tag you need to use. You can just use whatever level of heading tag you like within each piece of sectioned content and the HTML5 outline algorithm will order it accordingly.

You can test the outline of your documents using HTML5 outliners at one the following URLs:

• http://gsnedders.html5.org/outliner/
• http://hoyois.github.com/html5outliner/

The following screenshot shows the HTML 5 Outliner page:

Tip

For more on what the W3C HTML5 specification says about <hgroup>, visit:

http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element

The <header> element doesn't take part in the outline algorithm so can't be used to section content. Instead it should be used as an introduction to content. Practically, the <header> can be used for the "masthead" area of a site's header but also as an introduction to other content such as an introduction to a <article> element.

Like the <header>, the <footer> element doesn't take part in the outline algorithm so doesn't section content. Instead it should be used to contain information about the section it sits within. It might contain links to other documents or copyright information for example. Like the <header> it can be used multiple times within a page if needed. For example, it could be used for the footer of a blog but also a footer within a blog post <article>. However, the specification notes that contact information for the author of a blog post should instead be wrapped by an<address> element.

The <address> element is to be used explicitly for marking up contact information for its nearest <article> or <body> ancestor. To confuse matters, keep in mind that it isn't to be used for postal addresses and the like unless they are indeed the contact addresses for the content in question. Instead postal addresses and other arbitrary contact information should be wrapped in good ol' <p> tags.