Update 16th April, 2013. hgroup has now been removed from the HTML5 specification. We are working on an article to help guide authors on which markup patterns they should use instead.

Update 4th April, 2013. Please note that following this decision, hgroup will be removed from the HTML5 specification. As such, we don’t endorse using it on production sites.

One of the new elements defined in HTML 5 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. W3C Specification

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.)

Screenshot from Alex Gibson’s MiniApps site

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.)

Document outline of miniapps.co.uk

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 HTML 5 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> .

– ), you do not need an . If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive <h1> – <h6> ), group them in an <hgroup> .

– ), group them in an . 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.