Using header and hgroup in HTML5

←Back to listing

When I’m reviewing and commenting on submissions for HTML5 Gallery, I come across a number of common mistakes one of which covers the use (and mis-use!) of the header and hgroup elements.

What the spec says

The HTML5 specification itself describes these elements thusly:

The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

What this means
The header element is quite versatile. It can contain a number of hN elements, it can also contain a hgroup element. It also doesn’t have to contain any hN elements at all. It could be used to enclose a table of contents, or an introductory logo, or, as is quite commonly seen, a nav element.

This means that any of the following examples are correct uses of the header element:

<header>
   <h1>A blog post</h1>
   <img src="a-related-image.jpg" alt="A related image" />
</header>
										
<header>
   <nav>
      <a href="home.html">Home</a>
      <a href="about.html">About</a>
   </nav>
</header>
										
<header>
   <hgroup>
      <h1>Welcome to My Site</h1>
      <h2>It is awesome to the max</h2>
   </hgroup>
   <nav>
      <a href="home.html">Home</a>
      <a href="about.html">About</a>
   </nav>
</header>

This last example also provides us with a correct use of the hgroup element, as it contains two hN elements.

This is ALL that the hgroup element can contain.

I have seen examples of sites adding extra bits within the hgroup element, which is incorrect. It can only contain one or more hN elements.

The purpose of the hgroup element im the example given above, is to mask the h2 element from the HTML5 Outline algorithm, as the h2 content is serving as a secondary title only.

Too much!
This leads us on to type of mis-use of these elements. I have seen sites that wrap a single h1 in a header or even within a hgroup! If there’s only one hN in your header (and nothing else), then forgo the header element completely. As it’s not needed.

So instead of writing:

<!-- contains unnecessary code -->
<article>
   <header>
      <h1>Look at my blog post!</h1>
   </header>
   <p><!-- content --></p>
</article>
Simply write:
<article>
   <h1>Look at my blog post!</h1>
   <p><!-- content --></p>
</article>
Similarily, if your header element only contains a hgroup (which then contains multiple hN) then the header is also not needed.

So the following code:

<!-- contains unnecessary code -->
<header>
   <hgroup>
      <h1>You there!</h1>
      <h2>Listen to me for all that I say is the truth</h2>
   </hgroup>
</header>
Should be written as:
<hgroup>
   <h1>You there!</h1>
   <h2>Listen to me for all that I say is the truth</h2>
</hgroup>
Of course a web document can contain any number of header and hgroup elements, and, as you’ve no doubt noticed in one of the example above, they can also be contained within article and also section elements.

As with many other of the new HTML5 elements, header and hgroup require an extra bit of thinking when using them, and I myself have been quilty of mis-using and over-using them in places. But, like you, I have learned from others and continue to do so.

Further Reading
The esteemed Rich Clark covered this as part of his avoiding common HTML5 mistakes post over at HTML5 Doctor a few months back. This is also well worth a read.