Farewell, hgroup
The <hgroup> elements is removed from HTML 5.1. It was defined as “typically used to group a set of one or more h1-h6 elements ”” to group, for example, a section title and an accompanying subtitle.”
I shan’t be sad to see it go; in November 2010, I argued that it was too hard to grasp; if you want to indicate that something is a subtitle or tagline, you want to indicate that on the tagline itself, rather than on an element that groups a tagline and non-taglines.
More recently, Alex Russell and I had a conversation in which he argued that elements without a UI are likely to fail (more of that from him, later). I think he’s right in this case; <hgroup> is used solely to preserve the outlining algorithm which itself is esoteric.
So how do you now mark up taglines and subheaders? Simply: as you always have. The spec now discusses this in the Common idioms without dedicated elements section.
Three methods are suggested. The simplest is simply with punctuation:
<h1>The Lord of the Rings: The Two Towers</h1>
The second is by using a <span> inside a heading element that allows you to style the secondary part, for example with h1 span {display:block; font-style:italic;}:
<h1>The Mothers
<span>Fillmore East - June 1971</span>
</h1>
The third (and the one I use, because a tagline doesn’t feel like a heading to me, but does belong with one in the <header>):
<header>
<h1>The Mothers</h1>
<p>Fillmore East - June 1971</p>
</header>
Expect HTML5 Editor Steve Faulkner to blog about this for HTML5 Doctor when the jet-setting roister-doister returns back to Blighty next week.
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
17 Responses to “ Farewell, hgroup ”
Removing `hgroup` seems a good idea but I do believe there’s a need for a dedicated element. (Personally, I’d like to see the (Mythical) Outline implemented in browsers…)
Adding the byline/subheading to the heading itself seems problematic ‘semantically’: how would screenreaders handle such a scenario? Some bylines work well closely tied to a heading, but others do not.
And I’ve always found it a bit strange to use a `P` element for all this sort of stuff (that’s arguably not a paragraph).
My vote goes to Steve’s proposed `subline` element at the moment.
Oh good, finally some cleaning up where it makes sense. The three suggestions are more than adequate with <header> the clear choice for grouping, with or without hierarchy.
I’d like to argue that the decision would be orthogonal to getting rid of <main> and am interested to hear more about the idea of tags without a UI being doomed (<div> & <span> would be on my list but I suspect that puts me in a very small minority.
Strange to have a hgroup element without fgroup (footer) or sgroup (section). Won’t miss it either! 🙂
@david,
as defined what hgroup did for consumers of the semantics (i.e AT users)was to turn multiple headings into one big heading. So it promoted the use of multiple headings then effectively concatenated the content into one heading (hgroup).
I think it may be useful to have a dedicated method of indicating subheadings, subtitles etc but The process of getting a new element added to HTML is not easy (unfortunately in the case of hgroup it was not properly reviewed before it was implemented, but this had a lot to do with the HTML standard development situation at the time) and generally requires a lot of work (solid use cases, data and research etc). We may see some movement in the future in the development of a dedicated element, but it will require people to put in the effort.
@Steve Thanks. I know/agree. My intention was to say that, at the moment, a dedicated element for bylines seems a good idea and that I believe your `subline` proposal is a good start re: ‘the work’ 😉
That said: ‘combining headings for the outline’ does not seem a very pressing use-case so maybe the benefit of simplicity/clarity outweighs it.
Hey, I was using that! â€
*grumble grumble*
†Not really, but I’m sure those that were, and who will now have to re-write their pages will be at least a little annoyed. They try and do the correct thing, but …
I used hgroup on quite a few projects, I thought it was a good idea.
I cant say I ever used this in my markup / code.
[…] Farewell, hgroup […]
I was fond of . I’m sad to think there will be skips full of obsolete tags outside design offices…
I’ve used this quite a bit, however it always struck me as semantic sugar and not much else so I’m not really surprised to see it go.
I thought this was a nice idea AND was using it for a number of projects. While I appreciate the suggestions of alternatives, they all seem a little janky to me. I think I’ll leave the hgroup as is till the dust settles and a non-janky equivalent is agreed.
Of course no one uses hgroup for presentation do they so in theory you could just remove it. Or if you accidentally used it for pres. then substituting in a div might be one idea.
Thanks Bruce and keep up the good work.
I never used it either, I think we need a good clean up.
[…] Farewell, hgroup (brucelawson.co.uk) […]
[…] Farewell, hgroup […]
[…] Farewell, hgroup […]
Yep – won’t be missed. Always seemed a strange idea to me – essentially a quasi header within a header, never did find a use case for hgroup.
Good to see the working group is keeping it simple.