<hgroup> Heading group
Ties a heading to its subtitle or tagline paragraphs.
An <hgroup> wraps one heading (h1 to h6) and one or more <p> elements that serve as a subtitle, alternative title or tagline.
Those paragraphs stay paragraphs and add no levels to the outline. People often put two headings in one hgroup to fake a subtitle, but current HTML wants the subtitle in a paragraph.
The hgroup element section of the HTML standard (opens in a new tab) has the current content model, which allows one heading plus paragraphs. The h1 to h6 headings have their own page.
Syntax
<hgroup>
<h1>Main title</h1>
<p>Subtitle</p>
</hgroup>When to use it
An hgroup pairs a heading with a line that belongs to it without being a heading itself: a book or film subtitle, a company tagline under the site name, a version number under a product name, a "Part 2 of 3" line above an article headline.
Information about an article, such as the author or the date, goes in the article's <header>. The first sentence of the content is an ordinary paragraph after the heading. And if what follows really starts a new section, that section needs its own heading, not an hgroup.
Some people treat hgroup as a general wrapper for a hero area. Only one heading and <p> elements (plus script-supporting elements) may go inside it, so a logo image, a link list or a button in there is invalid. Put those next to the hgroup, inside a header element if they introduce the page.
Live example
Edit the code and watch the preview.
<hgroup>
<h1>The Pancake Club</h1>
<p>Flipping since 2019</p>
</hgroup>More examples
Book title with an alternative title
Some books have an alternative title joined with "or". The real title is the heading, and the alternative title is a paragraph in the same hgroup. The outline shows one heading, "Frankenstein", while readers still see both lines together.
<hgroup>
<h1>Frankenstein</h1>
<p>or: The Modern Prometheus</p>
</hgroup>
<p>A novel by Mary Shelley, first published in 1818.</p>A kicker line before the heading
The paragraph inside hgroup may also come before the heading. Here a small "Part 2 of 3" line sits above the article title. The author line is placed outside the hgroup, in the header, because it describes the article rather than the title.
<style>
hgroup p{margin:0;font-size:.85rem;text-transform:uppercase;color:#777}
hgroup h2{margin-top:4px}
</style>
<article>
<header>
<hgroup>
<p>Part 2 of 3</p>
<h2>Building your first page</h2>
</hgroup>
<p>By Ana Lopez</p>
</header>
<p>Today we add headings and paragraphs.</p>
</article>Tip: One heading and some paragraphs. Never two headings.
Browser support
Browsers have recognised hgroup since the HTML5 era, and it does not change how text looks. What changed is its meaning: in 2022 the HTML standard redefined it as one heading plus paragraphs, after the outline algorithm was dropped. Browsers expose it as a group, so it is safe to use; see the hgroup support table (opens in a new tab).
Accessibility
Screen readers treat the p subtitle as ordinary text read after the heading, because it is not a heading. So the heading has to make sense by itself, as the W3C note Understanding Headings and Labels (opens in a new tab) explains.
Common mistakes
Wrong
<hgroup>
<h1>HTML Schools</h1>
<h2>Learn HTML step by step</h2>
</hgroup>Right
<hgroup>
<h1>HTML Schools</h1>
<p>Learn HTML step by step</p>
</hgroup>Today's standard allows one heading per hgroup. The subtitle is a p.
Frequently asked questions
What is hgroup used for in HTML?
It keeps a heading and its subtitle together. <hgroup> holds one heading (<h1> to <h6>) and one or more <p> elements acting as a subtitle, alternative title or tagline. The paragraphs create no extra headings, so the document outline lists only the real heading, and the subtitle stays attached to it visually and semantically.
Can hgroup contain two headings?
Not any more. Older drafts allowed several heading elements in <hgroup>. The HTML Living Standard changed that in 2022, and the element now holds exactly one h1 to h6 plus optional <p> elements before or after it. Subtitles go in paragraphs.