<hgroup>: The HGROUP Element
Last updated: 2026-10-13
<hgroup>The HGROUP Element
Groups a set of headings (<h1>–<h6>), usually a title plus subtitle, so multiple headings act as one heading block.
| Category | Semantic |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </hgroup> tag |
| Status | Standard |
📝 Syntax
<hgroup>
<h1>Main title</h1>
<h2>Subtitle</h2>
</hgroup>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <hgroup> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： hgroup should contain only headings; SEO usually takes the top-level <h1> as the page title.
❓ FAQ
QWhat does hgroup do?
A
<hgroup> bundles a heading with its subtitle, as in <hgroup><h1>Main title</h1><p>Subtitle text</p></hgroup>. It tells assistive technology that these elements together form one heading block.QIs the p inside hgroup treated as body text?
AInside
<hgroup>, a <p> is interpreted as a subtitle rather than an ordinary paragraph (hgroup only permits h1-h6 and p) and can be styled as a subtitle with CSS. Other content such as images or link lists is invalid.QHow is hgroup supported — do we still need it?
ABrowsers give
<hgroup> no special rendering (it is just a plain container), and it was once deprecated then restored. If the subtitle does not need heading-group semantics, a <header> with h1+p is enough; use hgroup when you need strict document-outline semantics.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
