HTML and CSS Reference
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
<h1>Where Do They Get Those Wonderful Toys?</h1>
<h2>An Insider's Tour of the Cutting Edge Manufacturing
Wing at Power Outfitters</h2>
<p>By Norm DePlume</p>
<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>
<p>Posted on August 9, 2011</p>
<p>© copyright Cape and Cowl Quarterly</p>
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 topic, 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.
There are no required attributes for the hgroup element.