Using header and hgroup in HTML5
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:[codebox 1][codebox 2](undefined)
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.