Historical Reference: the <hgroup> element

Note: The <hgroup> element has been made obsolete.

This post was pulled from the original version of my book Mobile HTML5. I have added it to the blog for historical reference. At the time of this posting, the title and subtitle of my blog are in an hgroup.

————–

The <hgroup> groups a series of <h1> to <h6> elements when the heading has more than one level, such as a heading with a subheading, alternative headline and / or tagline. This may seem like a useless element, but it does serve an important purpose: <hgroup> enables a subheading to be associated with a related heading, so you can include more expressive content, like a subtitle or tagline, without the subheading being added to the document outline.

Many designers will create a main header with a tagline directly underneath.  In the past, developers have ‘incorrectly’ included an <h1> for the main title, followed by a <h3> for the much smaller tagline, providing for two main headers in non-sequential order, when in actuality, only the contents of the <h1> was the real title of the page. Another markup tactic involved including a <span> within the <h1> to stylize part of the heading as a tagline or subheading, even thought the tagline did not have the same importance as the rest of the heading in which it was incased.

For example, in previous versions of HTML, we may have written:

<h1>Sectioning Elements in HTML5 <span>Dividing your pages semantically with new HTML5 sectioning elements</span></h1>

we can now write:

<hgroup>
<h1>Sectioning Elements in HTML5 </h1>
<h2>Dividing your pages semantically with new HTML5 sectioning elements</h2>
</hgroup>

The document outline will then only show the contents of the <h1>.  Breaking the document up into semantic sections allows HTML5 to create an explicit outline for the document, with the table of contents delineated by the header of each section. In previous versions, including <h1> thru <h6> determined the document outline. With HTML5 you can now add headers without adding to the outline, and you can add to the outline without adding headers. To check out the outline created by the semantic markup in your documents, add the HTML5 Outliner plug-in (http://code.google.com/p/h5o/) to your browser.

For example, a web page may contain code similar to the following:

 

<h1>Standardista</h1>
<h2>CSS3, JavaScript and HTML5 explained</h2>
<section>
     <h2>CSS3 Selectors &amp; Browser Support</h2>
     <h3>Which CSS selectors are well supported by which browsers</h3>
<p> ...content here ....</p>
</section>

In creating a table of contents for content of the site, the above would include all of the headers, which is too many, creating an outline that looks like the following:

Standardista …………………. …………………. …………… ……………………………. page 1

CSS3, JavaScript and HTML5 explained………. …………. … … …………….. page 1

CSS3 Selectors & Browser Support…… ………….. ………… … ………………. page 1

Which CSS selectors are well supported by which browsers… page 1

The above creates an outline that is more detailed than our actual content. By encompassing actual headers with their tagline or subtitle, we can create a more appropriately detailed outline:

 

<hgroup>
     <h1>Standardista</h1>
     <h2>CSS3, JavaScript and HTML5 explained</h2>
</hgroup>
<section>
<hgroup>
     <h2>CSS3 Selectors &amp; Browser Support</h2>
     <h3>Which CSS selectors are well supported by which browsers</h3>
</hgroup>
<p> ...content here ....</p>
</section>

Grouping header content within an <hgroup> creates a much more appropriate site outline:

Standardista …………………. …………………. …………… ……………………………. page 1

CSS3 Selectors & Browser Support…… ………….. ………… … ………………. page 1

The purpose of <hgroup> is to enable outlining based on header levels, masking all but the highest-ranking heading element within an <hgroup> from the outline algorithm. Using <hgroup>, the subheading is associated with the heading and does not get added to the outline.

Published by

Estelle Weyl

My name is Estelle Weyl. I an open web evangelist and community engineer. I'm a consulting web developer, writing technical books with O'Reilly, running frontend workshops, and speaking about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via @estellevw.