the hgroup tag/born from restrictions
It almost sounds like a joke, but three weeks can be a long stretch of time in the world of web development. These last couple of days I've
been catching up with the generated hassle around some obscurer parts of the html5 spec that found their way to the masses. Things moved quickly as some issues are
already being addressed, others remain sketchy and unwanted. This article will focus on a new html5 element, the hgroup tag.
I've been following the whole html5 footer issue with great anguish as I caught up with it chronologically. Luckily people are working on it right now, but the prospect of not being able to nest header/footer tags inside a footer tag still doesn't please me (as far as I got the specs and comments right that is). Sadly, this is not all that's worrying me.
the hgroup tag
It was a new tag that immediately caught my attention. One of the new html5 additions is the hgroup tag. Rather than explain myself, I'll simply stick to the official definition of this new element. This is what the working group has to say about the hgroup tag:
quote The element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines unquote
I've been using split titles ever since I started this blog and I've been struggling with them all along. But needless to say, I'm not in the least bit content with this proposal. I fail to see how this is going to work in practice and what impact this will have on the general heading structure of a page.
heading headaches
Headings are horrible, always have been. The fact that there is not one single tag for headings (with an attribute describing the level) but six is quite the bother, especially when you're aiming to create a logical heading structure within a webpage. Furthermore, even though all heading tags are block elements, other block elements can't be nested inside them. This is particularly annoying when you have split headings with subtitles or quotes.
It's these kind of restrictions that become problematic over time. I understand that they are added to help the starting htmler get a better grip on the language, but more often than not they turn out to be too restrictive for experienced htmlers (see the recent footer example). For the split titles on my blog I was forced to use span elements. Bleh.
why the hgroup is not such a good idea
<hgroup>
<h1>...</h1>
<h2>...</h2>
</hgroup>
It's nice that they tried to tackle this issue but there are so many things wrong with the hgroup that it's difficult to understand how this came up as a recommendation. What bothers me the most is that we need to use an extra heading level to capture a subtitle or even tagline/quote. This creates an empty level in the heading structure of your page which is completely unneeded and unwanted. In my case, my article titles should become h3 tags simply because I'm using a little subtitle? The subtitle itself is not really a heading of a section or part of my site, but more like a small expansion or side-thought related to the main title. Creating an extra heading level for that is utter nonsense.
Another issue I have is that taglines or quotes might be closely related to the main heading, but are not really headings themselves. Using a hgroup for grouping a heading and a quote is impossible since quotes are marked-up using blockquotes, which don't belong in the hgroup. What am I supposed to do now, put quotes in hX tags? That can't be right.
Finally, you're adding another heading tag separate from the existing hX structure and making the whole heading concept even more complex. And I don't even see what the hgroup tag adds semantically. It's not even grouping similar elements as subtitles, alternative titles, quotes or taglines don't even count as separate heading levels and should be marked-up using different tag anyway.
why I shouldn't complain
I know my comments should be directed at the mailing list but I'm simply not signing up to these things anymore. I hate them, they are worse than spam and are completely outdated. So I'm simply posting them here. If anyone agrees and feels like picking them up, please submit a link to this article to the whatwg mailing list (or simply recap the issues I raised here). If not, then so be it.
My conclusion is simple. The hgroup tag adds little to no semantic value and makes the whole heading structure even more complex than it already was. It solves a very contained problem that could've been avoided by lifting some restrictions that were unwanted in the first place, but instead a new tag was added that could lead to even more semantic nonsense and structural chaos. They must've had some good reasons to add this tag, but I fail to see how they could stand up against the issues it brings.
Alternatively, why do we even need structural restrictions in the first place. I've seen very little examples where they helped me build better html but I can name plenty of examples where they proved very bothersome indeed (no block elements within the a tag?). In theory it's a good idea, only it supposes that we are well at predicting the future. The past has learned us we are not.
Comments
Jens Meiert
Just a quick note on terminology: It’s hgroup element, not tag.
Niels Matthijs
Thanks for the pointer! I've been using them as synonyms for some time now. For those of you interested in the exact difference (quick Google search):
Though not really crucial for understanding I guess it's important to respect semantics ;)
Jeremy Keith
"In my case, my article titles should become h3 tags simply because I'm using a little subtitle? "
No, not at all. Your article titles should be h2s precisely because you put your subtitle in an h2 inside hgroup. The whole point of hgroup is that it masks all but the highest ranking heading from the document outline. So if you use an h1 and h2 in hgroup, the h2 will not contribute to the document outline. So you can go ahead and use h2s for your article titles and they will appear under the h1 heading.
Here's a handy tool for generating outlines from HTML5 documents: http://gsnedders.html5.org/outliner/
Niels Matthijs
Jeremy: thank you for taking the time to reply. Very interesting information that indeed nullifies some of my concerns.
On the other hand, it raises a few others. To my knowledge this is the first time that the semantic meaning of an element is determined by a parent element.
When I nest an h1 and h2 element inside a hgroup element, this means the h2 element seizes to act as a heading of (what html5 now calls) a section. It's somewhat understandable if the h2 functions as a subtitle, but it becomes pretty weird when it is used for taglines (no heading if you ask me) or even quotes (we already have a tag for that one).
The semantic value of an element changes completely on the existence of a certain parent element and even depending on its peers (whenit is the highest heading inside the hgroup it remains a section heading, if not it becomes something undefined but closely related to that heading).
I've been reading up a bit and saw the algorithms needed to interpret all of this. To be honest, I think something very easy just became quite complex and opened a door to even more complex html changes (semantics of an element depending on their parent).
Apart from that, I'm still not too happy with the restrictions put on the hgroup tag, allowing only h1-h6 elements (or am I misinterpreting that too) inside.
zcorpan
If you want to group a quote or a paragraph together with your heading, then you don't use ; you use. is for turning a group of h1-h6 elements into a single heading as far as the document's outline (aka Table of Contents) is concerned. is for a section's introductory material.
zcorpan
Your preview doesn't match what is shown when posted. The blanks should be: hgroup, header, hgroup, header.