Foundation HTML5 with CSS3

Constructing Content

other subheadings within the same hgroup don’t count towards the document outline. This is perfect for

subtitles like the one in Listing 4-9, but not much else.

Listing 4-9. An article’s title and subtitle in an hgroup element

<article>

<header>

<hgroup>

<h1>Where Do They Get Those Wonderful Toys?</h1>

<h2>An Insider’s Tour of the Cutting Edge Manufacturing

Wing at Power Outfitters</h2>

</hgroup>

<p>By Norm DePlume</p>

</header>

<p>Power Outfitters Superhero Costume and Supply Company is

located in a nondescript building on Kirby Ave, a site that

once housed a large printing plant. Behind their modest

storefront is an expansive warehouse positively packed to

the portholes with paraphernalia.</p>

<footer>

<p>Posted on August 9, 2011</p>

<p>© copyright Cape and Cowl Quarterly</p>

</footer>

</article>

Were it not for the hgroup in this example, the rest of the article would be associated directly with the h2

subtitle, and not with the actual title in the h1. The new hgroup element allows authors to include subtitle

headings between a heading and its content without throwing off the document’s natural outline.

There’s been some debate among web standards sticklers about the usefulness of the hgroup element. It

exists solely to hide subtitles from the document outline, and serves no greater semantic purpose. The

debate is still going as we write this book, and there are a few open proposals to remove hgroup from the

HTML5 spec (w3.org/html/wg/tracker/issues/164), possibly replacing it with another element

intended specifically for subtitles, or simply modifying the document outlining algorithm (more on that in a

minute) to make better use of the more meaningful header element. But hgroup is still in the spec for now

so we’ve covered it here. That may change by the time you read this so refer to the specs and validate

your markup to be certain.

The hgroup element is flow content, but also falls under the heading content model. It can only have

heading elements, h1 through h6, as its children; no other elements are allowed as direct children of an

hgroup, but those headings can still contain other phrasing elements. The hgroup element also requires

an end tag and has no default styling except to display as a block-level element. An hgroup doesn’t have

to be wrapped in a header element, though it often should be if it’s the main heading of a section or

article. Don’t use an hgroup element at all if you have only a single heading.

Required Attributes

There are no required attributes for the hgroup element.