One of the new elements defined in HTML5 is <hgroup>, used for grouping titles with their associated subtitles. But why do we need <hgroup> when we’ve already got the <header> element? In this article, we’ll do our best to answer that question.

What is the <hgroup> element?

Here’s what the spec says about <hgroup>:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

So what does that mean?

<hgroup> acts as a wrapper for two one or more related heading elements possibly contained within a <header> element. It can only contain a group of <h1>–<h6> element(s), and it should be used for subtitles, alternative titles, and tag lines.

The easiest way to demonstrate proper use of <hgroup> is through some examples. Thanks to Dr. Oli for letting us use his examples.

An article with one title

The title consists of a single <h1>, so neither <hgroup> nor <header> is required:

<article>
  <h1>Title goes here</h1>
  <p>Lorem Ipsum dolor set amet</p>
</article>

An article with a title and metadata

Here we’re using <header> to group the title and associated metadata, so an <hgroup> is not required:

<article>
  <header>
    <h1>Title goes here</h1>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>
  <p>Lorem Ipsum dolor set amet</p>
</article>

An article with a title and subtitle

An <hgroup> contains the title and subtitle of the article:

<article>
  <hgroup>
    <h1>Title goes here</h1>
    <h2>Subtitle of article</h2>
  </hgroup>
  <p>Lorem Ipsum dolor set amet</p>
</article>

An article with a title, subtitle and metadata

An <hgroup> contains the title and subtitle of the article, and then a <header> contains the metadata and the <hgroup>:

<article>
  <header>
    <hgroup>
      <h1>Title goes here</h1>
      <h2>Subtitle of article</h2>
    </hgroup>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>                
  <p>Lorem Ipsum dolor set amet</p>
</article>

Real world examples

On Alex Gibson’s MiniApps, he uses <hgroup> to include a tag line after the main “MiniApps” heading. (This is also what we’ve done on this site if you view the source.)

So why use <hgroup>?

It’s all about the document outline. When grouping headings in an <hgroup> element, the outline algorithm will mask the lowest level all but the highest level heading in the group from the resulting document outline. Using MiniApps as an example again, in his markup (although this is simplified), Alex uses:

<header>
  <hgroup>
    <h1><a href="/">Mini Apps</a></h1>
    <h2>Web applications for iPhone, Android & other mobile platforms</h2>
  </hgroup>
</header>

The <hgroup> contains both <h1> and <h2> elements, but the outliner only includes the <h1>. This is illustrated in the image below. (Please ignore the “untitled section” as well. This is caused by the nav element, and a change request has been submitted to address this.)

We’ll be covering document outlines in another article, so I won’t go into detail here. You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements within <hgroup> correctly.

Summary

In this article, we’ve demonstrated how to use the <hgroup> element effectively. To recap:

• If you have a simple title with a single heading element (<h1>–<h6>), you do not need an <hgroup>.
• If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive <h1>–<h6>), group them in an <hgroup>.
• If you have a title with subtitle(s) and other metadata associated with the section or article, place both the <hgroup> and the metadata within a single <header> element.

Let us know how you’re using <hgroup> in your HTML5 projects!