hgroups and sub-titles

I realise that queries or concerns about HTML 5 elements should make their way onto the WHATWG mailing list, but I just wanted to get a few thoughts out on here about what I’ve spent far too long discussing at work recently. It’s perfectly likely that I’ve totally got the wrong end of the proverbial, so this is just me trying to get my mind straight on why I feel something about this is unnatural and I welcome comments to help clarify or discuss.

So, hgroup, eh?

hgroup is one of the new elements featuring in the HTML 5 specification. It’s purpose, quite simply, is to group two or more headings together into one block so that subheadings are treated differently and only the first heading becomes part of the document outline.

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.

From the current HTML5 working draft

The WHATWG wiki has the following rationale for requiring the hgroup element:

The point of <hgroup> is to hide the subtitle from the outlining algorithm

WHATWG wiki

Over on HTML5 Doctor, John Allsopp appears to find fault with this element also and suggests that the requirement for hgroup is symptomatic of a flaw in the outlining algorithm. I can see his point, but I’m more concerned that it’s a fundamentally inaccurate use of a heading.

In my mind, headings are designed to denote sections. At least, that’s what they were used for in HTML 4. Things either went in a heading, because they denoted a new section of content, or they didn’t. This is Frances the idealist speaking, I realise this, but still.

Let’s say I had a new website about a children’s story about monsters, and I wanted to title it “Monsters live under my bed”, but it could also have a sub-title or strap-line. As an author, I either want my title to be “Monsters live under my bed. Where things go bump in the night” or I want it to be “Monsters live under my bed” and the next line is incidental and a supplementary strap-line and not something I would consider to be part of my title.

Currently, I might do any of the following:

<h1>Monsters live under my bed 
Where things go bump in the night
</h1>

Example wrapped for legibility, but my story title is the full text and is in a heading.

<h1>Monsters live under my bed 
<span>Where things go bump in the night</span>
</h1>

This one is mostly a stylistic example. The strapline needs to look like a strapline, so I’ve stuck a span around it (yeah, I know…), but fundamentally I’m still considering it to be part of the title. My story’s name is the full text.

<h1>Monsters live under my bed</h1>
<p>Where things go bump in the night</p>

In this case, the title of my story is only “Monsters live under my bed” and because HTML 4 doesn’t really offer a suitable element that I would consider “a sub header that isn’t a new section of the document” I’ve stuck the sub-title text in a paragraph.

<h1>Monsters live under my bed</h1>
<h2>Where things go bump in the night</h2>

This one suggests that I have a title and then the first chapter beneath the title is “Where things go bump in the night”. That second line is no longer the title of my kids story. The h2 would be a new indented item in an outline and would suggest that further within the document I may find more h2s and that I have stepped into the document by a level.

What HTML 5 says you would do is this if you want a sub-title/sub-heading is:

<hgroup>
<h1>Monsters live under my bed</h1>
<h2>Things that go bump in the night</h2>
</hgroup>

This has the effect of making that h2 not appear in the outline, since it will no longer create a new section. The outline now considers that the title of my story is again “Monsters live under my bed”. Any content that comes after this would be within the section titled by the h1. The h2 doesn’t count as the start of a new section (as it would if there was no hgroup wrapper). The contents of the h2 is considered a special non-sectioning-heading case, but it’s still in a heading element. But if it’s meant to be a heading, why isn’t it in the h1? Gah!

I kind of have the feeling that what we should have at our disposal is something that looks more like the following, which allows for a heading and some sort of sub-title(s) (naming isn’t my strong point, I’ve picked ‘strapline’ fairly arbitrarily, but essentially I imagine it as a non-heading sub-title of some nature – maybe even subheading?). It’s not as if hgroup is allowed to hold anything other than headings anyway.

<h1>Monsters live under my bed</h1>
<strapline>Where things go bump in the night<strapline>

It satisfies my problem with using lower numbered headings for things you consider to either be associated as part of the first heading (or rather, supplementary to it) or not actually headings at all. If I want my full title to be all of the above, it can all go in the h1. If I don’t consider the second line to be part of a heading, it gets to go in it’s own non-heading supplementary titling element. The rationale quoted above specifically says “subtitle”, although I noticed the current editor’s draft for hgroup does mention “subheadings”.

Do you follow my drift?

If we’re in the business of having the opportunity to create new elements, can’t we just create one that actually satisfies the requirement explicitly rather than sort of allow authors to do things that seem somehow hypocritical to the point of heading elements in most other contexts. I also realise that purist intentions fall waaaaay down the list of priorities when compared to the requirements of paving existing usage, but as an author as well, I feel that there’s something fundamentally inaccurate about treating a heading as a non-heading. As an author I want to be able to be as accurate as possible.

Is it just time for me to let go of the idea that headings do the job of creating and naming sections in a document outline?

Aren’t semantics fun!

23 thoughts on “hgroups and sub-titles

  1. Pingback: Sam de Freyssinet
  2. Pingback: Kenneth Kufluk
  3. Was going to write something more detailed here, but it basically boils down to: I agree, these things should have their own element, not completely set on “strapline” but can’t think of anything better right now.

  4. @Jake: Yeah – I don’t really like ‘strapline‘. I think I actually prefer ‘subheading‘. sh? Whatever the OED would call it.

  5. Pingback: Boagworld Links
  6. Pingback: Frances
  7. I agree as well. Seems like a wasted effort to create hgroup when they should just create subheading.

  8. Pingback: Ethan
  9. Pingback: thamiris
  10. I would consider adding new elements (particularly standalone elements) a last resort in just about any case.

    If an element is to be created — like hgroup — it makes a ton of sense for it to be one that leverages and adds value to existing elements, rather than simply standing on its own.

    Frances makes a great point about the semantic flaws in grouping heading elements. But I see an easier path for browser makers and designers in interpreting headings within an hgroup than the path to uniquely interpreting an entirely new standalone element.

  11. Paving The Cowpaths is one thing but it doesn’t make a lot of sense when the cows are wandering through a river. What makes sense is to build a bridge.

    I completely agree. And my suggestion for the name of the element would be something like subh.

  12. Pingback: Carlos A Zepeda
  13. I totally agree that hgroup is a heavy-handed solution if all you’re trying to solve is the problem of straplines. I wonder if perhaps the idea is also to open up the possibility of having more complex structure in headings:

    http://feedmechocolate.com/stuff/headings.html

    while still keeping a sensible outline:

    http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Ffeedmechocolate.com%2Fstuff%2Fheadings.html

    I’m undecided as to whether encouraging that kind of thing is a good idea.

    “The contents of the h2 is considered a special non-sectioning-heading case, but it’s still in a heading element. But if it’s meant to be a heading, why isn’t it in the h1? Gah!”

    I think of the hgroup element itself as the actual heading element. It’s just like normal heading (h1-h6), except that instead of just containing a piece of text, it has some internal outline-like structure.

    When you have at the top level in a document, the h1 and h2 elements are no longer headings in that document. The entire hgroup element is the heading. For outlining purposes, the hgroup ‘picks’ the highest heading it contains as a summary of itself, and folds away the rest of its detail.

    Again: it’s a heavy syntax, but it does at least seem to make sense to me with the way I think about headings.

  14. Pingback: Kelly Miyashiro
  15. Pingback: Ross Bruniges
  16. Pingback: ray brooks
  17. Pingback: Jamie Newman
  18. I may be missing something, but what is wrong with header followed by a paragraph that happens to be a sub-heading? Is there any semantic meaning to sub-heading that we need to convey? Wth h1+p we have a hook we can use to style it. I don’t see the point in a new element (hgroup included).

  19. When you have at the top level in a document, the h1 and h2 elements are no longer headings in that document. The entire hgroup element is the heading. For outlining purposes, the hgroup ‘picks’ the highest heading it contains as a summary of itself, and folds away the rest of its detail.

Comments are closed.