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
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
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
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
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
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.
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>
<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
hgroup elements, and, as you’ve no doubt noticed in one of the example above, they can also be contained within
article and also
As with many other of the new HTML5 elements,
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.
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.