.mindgarden is the digital playground of marc tobias kunisch

.opinions on this website are in not necessarily those of my employer

.send an email to info 'at' mindgarden 'dot' de

.follow the mindgarden on twitter @mindgarden_de or @tobestobs
.occasional guest bloggers are @lwsrc, @dheeva and @idrathernot


headings in html 5 and the new hgroup element

People writing html should all be aware by now that the html heading elements (h1 – h6) should be used in a semantic manner. Meaning you shouldn’t use an h2 element without using an h1 first for example. This is quite important for search engines and assistive technologies as well as the overall semantics of your markup.

headings in html5

html5 will treat headings a wee bit different to what we’re used to. Any section (section in this does not necessarily have to mean the section element but rather ‘sectioning element’) will be able to have its own hierarchical order. Meaning that you can use h1s at the start of each section. As all sections will be aware of their own hierarchy in the document the heading element will be treated accordingly.

For example in a section element with an h1 heading containing a nested section element with its own h1 that nested h1 would be treated as an h2. Because it’s lower down in the overall hierarchy. Look at this example by Bruce Lawson to get a better understanding how that works.

screenshot of example heading file

It becomes even clearer if you look at the generated outline for Bruce’s example

screenshot of outline of the example file

Without question this will add a lot of complexity to how we use headings (think of the CSS we will have to write for that). The benefit on the other hand will be that you can include markup from other sources into you document more easily.

There’s an accessibility issue here as well. The current html5 spec has this to say about the usage of headings:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.

If we were to start using just h1 elements for all our headings without makers of screen readers and other assistive technologies first preparing their software for it, we’re basically destroying the semantic value of headings for these tools.

the hgroup element

Another novelty in html5 concerning headings is the hgroup element

There has never been a good way of just adding a subheading to an h1 element for example. If you use an h2 for that you’ll be having trouble setting that apart from the other h2s. You can’t use an h3 either because that would mean skipping one level.

So the brainy people working on the html5 spec came up with hgroup:

The rank of an hgroup element is the rank of the highest-ranked h1–h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).

This means that in this example

<h1>main heading</h1>
<h2>sub heading</h2>

the entire hgroup would be weighted as an h1 (if it is in the root, otherwise the weighting will be done according to the nesting level of the parent element of the hgroup).

Personally, I don’t think that’s necessarily a bad idea. The html5 super friends on the other hand would rather see this in the spec:

We don’t see the added value of this element and would instead add a boolean attribute to the heading element which allows content authors to specify if that particular heading should be included in the outline.

Further reading and sources