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.
Vanilla Breeze
A layered HTML component system
With small element
Using small for subtle secondary text.
Getting Started
Everything you need to begin building.tight
Minimal spacing between heading and subtitle.
Quick Setup
Install in under 5 minutes
.spaced
More generous spacing between elements.
Documentation
Comprehensive guides and API reference
.reversed
Subtitle appears above the heading.
The Ultimate Guide
Chapter 1
.centered
Centered text alignment for hero sections.
Welcome
Build beautiful websites with semantic HTML
.divided
Divider line between heading and subtitle.
Features
What makes Vanilla Breeze special
Combining variants
Multiple classes can be combined.
Our Mission
Making the web more accessible for everyone
In context: Article header
Common use within an article header.
Understanding CSS Grid
A comprehensive guide to modern layout
by Jane Doe
Article content begins here...
In context: Hero section
Centered hgroup in a hero section.
Build Better Websites
Progressive enhancement meets modern design
Variants
| Class | Description |
|---|---|
.tight |
Minimal spacing (--size-2xs) between elements |
.spaced |
Generous spacing (--size-s) between elements |
.reversed |
Flexbox column-reverse to show subtitle above heading |
.centered |
Centers all text within the hgroup |
.divided |
Adds a border between heading and subsequent content |
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