hgroup
Groups a heading with secondary content such as a subtitle, alternative title, or tagline. Creates a single logical heading unit.
Usage
Use the <hgroup> element to:
- Pair a heading with a subtitle or tagline
- Group a heading with an alternative title
- Associate metadata text with a heading
- Create visually connected heading groups
The hgroup should contain one heading element (h1-h6) and one or more p or small elements for supporting text. Only the heading contributes to the document outline.
Examples
Default
Basic heading group with subtitle.
<hgroup> <h2>Progressive Enhancement</h2> <p>Building resilient interfaces that work for everyone, regardless of capability or connection.</p></hgroup>.eyebrow
Small uppercase label above the heading. Place the label <p> first in the markup.
<hgroup class="eyebrow"> <p>Release Notes</p> <h2>Vanilla Breeze 2.0</h2> <p>A complete overhaul of the theming system, new component primitives, and full dark mode support.</p></hgroup>.byline
Article metadata (author, date, reading time) with dot separators between items.
<hgroup class="byline"> <h2>Understanding the Cascade</h2> <p> <span><a href="#" rel="author">Thomas Powell</a></span> <span><time datetime="2026-03-06">March 6, 2026</time></span> <span>8 min read</span> </p></hgroup>.section-header
Large section intro with a bottom border. Good for landing page sections.
<hgroup class="section-header"> <h2>Component Library</h2> <p>Semantic, composable HTML components styled with modern CSS — zero JavaScript by default.</p></hgroup>.display
Hero-scale heading with fluid type and an accent rule. For landing pages and hero sections.
<hgroup class="display"> <h1>HTML is the product.</h1> <p>A CSS-first framework built on the assumption that great HTML is already halfway there.</p></hgroup>.display centered
<hgroup class="display" data-align="center"> <h1>Start with the platform.</h1> <p>Modern CSS and HTML have quietly solved most of what frameworks were invented to handle.</p></hgroup>Spacing variants
.tight removes the gap. .spaced increases it.
<hgroup class="tight"> <h2>Quick Setup</h2> <p>Install in under 5 minutes</p></hgroup> <hgroup class="spaced"> <h2>Documentation</h2> <p>Comprehensive guides and API reference</p></hgroup>.reversed
Subtitle appears above the heading.
<hgroup class="reversed"> <h2>The Ultimate Guide</h2> <p>Chapter 1</p></hgroup>.divided
Divider line between heading and subtitle.
<hgroup class="divided"> <h2>Features</h2> <p>What makes Vanilla Breeze special</p></hgroup>Combining variants
Multiple classes and data attributes can be combined.
<hgroup class="eyebrow" data-align="center"> <p>Features</p> <h2>Everything You Need</h2> <p>A thoughtfully scoped set of primitives, patterns, and conventions.</p></hgroup>Variants
| Class | Description |
|---|---|
.tight |
No gap between elements |
.spaced |
Generous spacing between elements |
.reversed |
Flexbox column-reverse to show subtitle above heading |
.centered |
Centers all text within the hgroup |
data-align="center" |
Centers all text (attribute alternative to .centered) |
.divided |
Adds a border between heading and subsequent content |
.eyebrow |
Small uppercase label above heading (first p becomes the eyebrow) |
.byline |
Article metadata with dot-separated items (author, date, reading time) |
.section-header |
Large section intro with bottom border |
.display |
Hero-scale fluid heading with accent rule |
Accessibility
- Only the heading (h1-h6) contributes to the document outline
- Screen readers announce both the heading and subtitle as a group
- The subtitle (p/small) provides context but is not treated as a separate heading
- Use appropriate heading levels - don't skip levels for visual styling
- Keep subtitles concise to avoid overwhelming screen reader users