On the hgroup element

The more I try to explain it to people at workshops and in a marvellous book, the more uncomfortable I become with <hgroup>.

In the spec, it’s defined

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.

It has no rendering; its sole purpose is to hide subtitles from the outlining algorithm which browsers, third party sites (warning:broken) or bookmarklets may use to make document outlines/ tables of contents.

So if you have the following code

<header>
<hgroup>
<h1>bruceawson.co.uk</h1>
<h2>Gorgeousness in a gimp mask</h2>
</hgroup>
</header>

only the <h1> appears in the outline; the <h2> is suppressed. (The highest-ranking heading wins.) More on <hgroup> at HTML5Doctor.

The trouble with this is that there is a new magic element that does nothing except change the semantics of its contents in a way that is new (there has never been an outlining algorithm before) so it’s difficult to grasp.

There was discussion about minting a new <subtitle> or <tagline> element instead. This has the advantage that it”s much easier to grasp the purpose of it. However, these new elements would have no default rendering in legacy user agents and, the argument against continues, people are already marking up subtitles as headings, so this way paves a cowpath. (I have my doubts: I usually encounter constructions like <p class=tagline>Gorgeousness in a gimp mask</p> for subtitles).

Thinking out loud here, but I wonder if we need explicitly to group headings and subtitles, anyway. It seems to me that an outlining algorithm should just treat multiple headings (<h1>…<h6>) that are direct children of a header element to be a group of “main heading” and subtitle(s) automatically. So

<header>
<h1>brucelawson.co.uk</h1>
<h2>Gorgeousness in a gimp mask</h2>
</header>

would automatically “know” that the <h2> is the subtitle and not be shown in an outlining application.

This would only work for direct heading children of a <header>: here’s an example of multiple heading descendants in which the <h3> is not a subtitle:

<header>
<h1>brucelawson.co.uk</h1>
<h2>Gorgeousness in a gimp mask</h2>
 <nav>
 <h3>Main navigation</h3>
 <a href="home.html">Home</a>
 <a href="about.html">About</a>
 </nav>
</header>

I can’t think of any use cases for multiple headings as children of a <header> that wouldn’t be main heading + subtitles.

Can you?

(Also: ambiguities in mapping <hgroup> and ARIA information.)

Added later, after coffee: The outlining algo would only need to say: adjacent headings in a <header> are automatically considered to be a heading and subtitles, whether there be 2 or 22. Then, even if there were two headings for the <nav> inside the <header>, they would be automagically heading and subtitle.