References

Beginner-friendly references for web development, with live, editable examples.

The HTML <hgroup> tag

Element All modern browsers Updated
Quick answer

The HTML <hgroup> element groups a single heading (<h1>–<h6>) with related secondary content — typically a subtitle or tagline in one or more <p> elements — so they are treated as one unit.

Overview

The <hgroup> element associates a heading with related secondary content — a subtitle, tagline, or alternative title. It contains exactly one heading (<h1>–<h6>) plus one or more <p> elements for the supporting text.

Its job is to keep the document outline tidy. The heading inside still defines the section's level as usual, while the accompanying <p> is understood as part of that heading group rather than the start of a new paragraph block. So a title and its tagline read as one unit instead of two unrelated lines.

Use it specifically for the title-plus-tagline pattern — not for stacking several headings to fake a subtitle, which was the old and incorrect habit before <hgroup> settled into its current form.

Syntax

<hgroup>
  <h1>CodeShack</h1>
  <p>Web development references and tools</p>
</hgroup>

Example

Live example 
<hgroup>
  <h1>The Anchor Element</h1>
  <p>Everything about the HTML &lt;a&gt; tag</p>
</hgroup>

Best practices

  • Use it for a single heading plus a subtitle or tagline, wrapped together as one unit.
  • Put the subtitle in a <p>, not in a second heading element.
  • Keep exactly one <h1>–<h6> heading inside the hgroup.
  • Do not use multiple headings to simulate a subtitle — that distorts the document outline.

Frequently asked questions

What is the hgroup element for?
It groups a heading with a related subtitle or tagline so they are treated as a single unit in the outline.
Can hgroup contain two headings?
No. It holds exactly one heading (<h1>–<h6>) plus one or more <p> elements.
How do I add a subtitle to a heading in HTML?
Wrap the heading and a <p> subtitle in an <hgroup>, e.g. an <h1> followed by a <p> tagline.
Does hgroup affect the document outline?
It keeps the outline clean — the heading still sets the level, and the grouped <p> does not start a new block or section.
header hr