The hgroup tag was designed to group multiple heading elements (<h1> to <h6>) together when a single heading consists of multiple parts — for example, a title and a subtitle.
✅ Example Usage (Legacy)
<hgroup>
<h1>Main Title</h1>
<h2>Subtitle or Tagline</h2>
</hgroup>
This was intended to indicate that the <h1> and <h2> together form a single heading unit.
⚠️ Important Notes
- The
<hgroup>element is deprecated and not supported in HTML5. - Modern HTML standards recommend using separate heading tags styled with CSS instead.
- Screen readers and search engines may ignore
<hgroup>. - Its use is discouraged in new projects.
✅ Modern Alternative
Use CSS to style multiple headings together or wrap headings in a <div> or <section> without using <hgroup>:
<section class="title-section">
<h1>Main Title</h1>
<h2>Subtitle or Tagline</h2>
</section>
And then style .title-section h2 via CSS to visually associate it with the <h1>.
✅ Summary
| Feature | <hgroup> Tag |
|---|---|
| Purpose | Group multiple headings together |
| Status | ❌ Deprecated |
| Browser Support | Limited / inconsistent |
| Modern Practice | Use CSS + semantic containers |