On a product's homepage, a large title is often followed by a quieter line just below it: a tagline, a promise, sometimes the name of a plan. The natural instinct is to write that subtitle as a second heading tag, an h2 sitting right under the h1. Visually, the result looks perfect. For someone navigating by headings with a screen reader, though, the page suddenly announces two headings in a row where there is really only one.
The <hgroup> element solves exactly this problem: it groups a heading together with the text that belongs to it in a single block, so the main heading stays alone in the page outline while remaining visually tied to its subtitle.
Definition
<hgroup> is a container that bundles a heading, anything from <h1> to <h6>, with the content directly attached to it: a subtitle, a tagline, a date or edition note. The point is not to create a new heading level, but to tell the browser and assistive technologies that this paragraph belongs to the same block as the heading, without counting as an extra heading in the document's hierarchy.
A deliberately narrow content model
The content model of <hgroup> is strict, and it is recent: only one heading (<h1> through <h6>), paragraphs, and the technical elements <script> and <template> are allowed inside. Nothing else, no list, no image, no second heading.
It was not always this way. Early versions of the standard allowed several stacked headings, an <h1> followed by an <h2> for instance, to create a subtitle that also counted as a secondary heading in a nested outline. The idea looked elegant on paper, but no browser and no screen reader ever implemented it consistently: each tool built its own version of the page outline, sometimes differently from the next. The standard settled the matter in 2022 by restricting <hgroup> to a single heading, which finally makes its behaviour predictable everywhere.
A concrete example
On a product page, the name of the offer and its promise fit naturally inside an <hgroup>:
<hgroup>
<h1>Believemy Pro</h1>
<p>The subscription that unlocks every course, with no time limit</p>
</hgroup>A screen reader announces a single heading here, Believemy Pro, then continues reading normally with the sentence that follows. In the page's list of headings, only one entry shows up, exactly as a sighted visitor reading the page would expect.
What assistive technology actually picks up
Only the actual heading, the one written with <h1> through <h6>, enters the heading navigation outline. The paragraph next to it reads as ordinary text right after, but it never shows up in the list of headings a screen reader offers for jumping around the page. That is exactly the intended behaviour: a single piece of heading information, and a subtitle that stays readable without cluttering navigation.
<hgroup> existed, a common trick was to tuck the subtitle inside a <small> element nested within the <h1>. The visual result was fine, but the subtitle was still announced as part of the heading itself, which muddied how a screen reader read it out. That technique is now considered outdated in favour of <hgroup>, which cleanly separates the two roles.The two most common mistakes
The first is trying to recreate the old behaviour by placing a second heading inside the group, an <h2> under the <h1>, for instance. That is no longer valid: only one heading is accepted, and recent browsers ignore or move the second one outside the group when parsing the page.
The second mistake is wrapping every single heading on a page in <hgroup>, even when there is nothing to group it with. If a heading has no subtitle or related content, it needs no container at all: a plain <h1> or <h2> works perfectly well on its own.
| Element | Allowed inside hgroup |
|---|---|
| One heading, h1 to h6 | Yes, exactly one |
| A paragraph (subtitle, tagline) | Yes, one or more |
| A second heading (h1 to h6) | No |
| An image, a list, a link | No |
h1 and an h2, inside the same hgroup?No, not since the standard's 2022 revision. Earlier versions allowed it, to create a subtitle that also counted as a secondary heading, but no browser ever implemented that reliably, so the option was removed. Today only one heading is accepted, and the subtitle has to be a plain paragraph instead.
No, it is read out perfectly well, in order, right after the heading. The only thing it does not do is show up in the list of headings a screen reader offers for quick navigation: it reads like an ordinary paragraph, not like a navigation shortcut.
hgroup wrap every heading on a page?No, only when a heading genuinely comes with a subtitle, tagline, or related note to group alongside it. A heading with nothing attached to it needs no extra container at all, it stands perfectly well on its own.