No more HGROUP

The HGROUP element in HTML5 has been in and out a couple of times. It’s now out. It’s officially obsolete in the HTML5 specification which means that you should not use it.

sigh

So what do we do to create sub-headings that are not part of the HTML outline? Well, here are some suggestions from the W3C HTML5 spec:

  • First, don’t use H1-H6 elements, unless of course, they head up a new section.
  • You can use paragraph tags inside the HEADER element. Then you can style those elements with CSS child selectors (or however else you’d like to) to denote that they are subtitles.
    <header>
    <h1>Lord of the Rings</h1>
    <p>Return of the King</p>
    </header>
  • Another option is to separate the sub-title from the title with a colon. For example:
    <h1>Lord of the Rings: Return of the King</h1>
  • You could also use the SPAN element around your sub-title, but keep it all within the same heading tag:
    <h1>Lord of the Rings <span>Return of the King</span></h1>

For most people this change probably won’t matter too much. After all, the HGROUP element wasn’t used very often. But I found it useful and intuitive, and while I realize the specification is still in draft, I wish that this element had stuck around.

The arguments against it center around:

  • It doesn’t indicate which heading is the sub-heading
    I think this is obvious from the H1, H2, H3 structure. H2 is a sub-heading of H1, etc. 
  • Heading semantics are still apparent even without the element.
    But with the above methods this is no longer true. Especially when you take into account that the W3C recommends against using heading elements unless they are starting a new section.
  • The specification concatenated all headings anyway for accessibility
    I’m not sure why this matters. They still are headings and sub-headings.
  • The HGROUP element acted as a DIV by another name
    This is the most coherent argument against the HGROUP element.
  • Almost no one uses it
    Perhaps true, but not everyone uses HTML5 either.

Ultimately, it doesn’t really matter.

I may have used HGROUP all the time, but now that it’s gone I’ll simply stop using it. It really doesn’t impact my sites a lot, and if I leave it in some pages until I get around to updating them, it won’t matter as the browsers that recognize the element (for style calls, and so on) will continue to do so.

Yes, I’m a tad disappointed, but I won’t lose any sleep over this. Goodbye HGROUP, it was fun while it lasted.

Leave a Reply

Your email address will not be published.