The hgroup tag

The <hgroup> is a second-level element, used to wrap one or more heading elements (<h1> to <h6> ), such as the title and sub-heading. As the <hgroup> is only allowed to contain heading elements, some examples might be the easiest way to show when and where the <hgroup> should be used.

An article with title

When there is just one title, there is no need for the <hgroup> element:

<article>
	<header>
		<h1>All about flour</h1>
	</header>
</article>

An article with title and metadata

Still, there is just one title, so even though there is some metadata about the article, the <hgroup> element is not relevant:

<article>
	<header>
		<h1>All about flour</h1>
		<p>Published on January 12th</p>
	</header>
</article>

An article with title and subtitle

Now we have to titles, so we can use the <hgroup> element:

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
	</header>
</article>

An article with title, subtitle and metadata

When we have several title and metadata, the <hgroup> element only contains the actual titles (which should be marked up with the <h1> trough <h6> elements):

<article>
	<header>
		<hgroup>
			<h1>All about flour</h1>
			<h2> Wheat flour is the backbone of the baked goods we love</h2>
		</hgroup>
		<p>Published on January 12th</p>
	</header>
</article>

What you have learned

• The <hgroup> element is always inside a <header> element
• The <hgroup> element only contains headings (such as subtitles or tag-lines), which are marked up with the <h1> trough <h6> elements
• All other <header> relevant content should be outside of the <hgroup> element