HTML subheading markup in 2020

user_7794529 0
Viewed 1590

I'm trying to clarify how subheadings should be markuped in HTML in 2020.

The HTML Living Standard, 1 September 2020 spec says to use a <hgroup>:

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.

The Headings and sections section of the same spec explains how the HTML outline algorithm generates a content outline showing that the subheading in a <h2> in the following example the does not appear in/disrupt a page's structural outline.

<hgroup id="document-title">
  <h1>HTML</h1>
  <h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>

Splendid! Except the usage notes for <hgroup> on MDN (Last modified on 12 Apr 2020 at the time of writing) says:

[Given that] the HTML outline algorithm is not implemented in any browsers—then the semantics are in practice only theoretical.

But marking things up semantically has practical application with respect to accessibility, so what to do?

Sifting through mostly quite outdated search results, the best guides I can find seem to point towards using a <p> (eg. Usability & Web Accessibility). However, w3.org's Common idioms without dedicated elements page that is typically used as a reference for this technique redirects to whatwg.org's version (following the MOU between the two orgs in May 2019) which doesn't include the <p> for subheadings idiom because, of course, there is the <hgroup> element.

And so I've come full circle to my original question; how should I markup a subheading in HTML in 2020?

html
3 Answers

UPDATE: Since I posted this answer, WHATWG seems to have finally faced reality, removing references to outline algorithms, sectioning roots and the like.

In the updated specs, hgroup is still with us, but they have changed their recommendations on how to use it. Where they used to say:

Other h1–h6 elements of heading content in the hgroup element indicate subheadings or subtitles or (secondary) alternative titles.

The current advice is now:

The element may be used to group an h1–h6 element with one or more p elements containing content representing a subheading, alternative title, or tagline.

So the essence of my original answer was correct—you shouldn't use so-called sectioning elements to repurpose heading tags. Whether you place your p subheading inside a hgroup is really a matter of personal preference. :-)

My original answer:

If the underlying structure (outline) of your document is important to you, don't rely on sectioning elements to create an outline (despite what you read in many articles), and certainly don't rely on the hgroup element, which W3C deprecated. The W3C is quite clear on what not to do:

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

The spec is less helpful in telling us what we should do. The WHATWG just sort of pretends that hgroup (and the document outline algorithm) is properly supported by browsers, declaring:

The point of using hgroup in these examples is to prevent the h2 element (which acts as a secondary title) from creating a separate section of its own in any outline and to instead cause the contents of the h2 to be shown in rendered output from the outline algorithm in some way to indicate that it is not the title of a separate section but instead just a secondary title in a group of titles.

The W3C is a little more pragmatic, acknowledging that:

HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines.

They also suggest some possible workarounds here: Common idioms without dedicated elements: Subheadings, subtitles, alternative titles and taglines.

With all those semantic elements in HTML5, you'd think they could have just given us a <subhead> tag or something. (They did actually toy with the idea back in 2013.) In lieu of this, a <span> or p with class="subhead" works for me.

If you don't care about outlines (or accessibility), you can use sectioning elements to create the appearance of structure if you want to (since browser's will try and make the headings look right), and you can use hgroup with your own CSS styling.

Further reading: There Is No Document Outline Algorithm.

user_26527850

this tag not supported in html5 so is better you don't use it!

The <hgroup> element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away. However, given that a key purpose of the <hgroup> element is to affect how headings are displayed by the outline algorithm defined in the HTML specification—but the HTML outline algorithm is not implemented in any browsers—then the <hgroup> semantics are in practice only theoretical. So the HTML5 (W3C) specification provides advice on how to mark up Subheadings, subtitles, alternative titles and taglines without using <hgroup>.

user_124752850

I'm not sure how much I'd worry about MDN's warning that

the HTML outline algorithm is not implemented in any browsers—then the semantics are in practice only theoretical.

If the semantics are only theoretical, then using <hgroup> won't have any effect one way or the other. So two choices. The WHATWG method:

<hgroup>
  <h1>HTML</h1>
  <h2>Living Standard</h2>
</hgroup>

Or the W3C way:

<header>
  <h1>HTML</h1>
  <p class="subhead">Living Standard</p>
</header>

If MDN is right, and "the semantics are only theoretical", and they are right that <hgroup> "is unlikely to go away", then these two methods will both work. So choose whichever one you prefer.

user_86059920
Related