Skip to content

<hgroup>

The <hgroup> element groups a heading with related metadata — such as a subheading or tagline — without the secondary content affecting the document outline.

Basic Usage

live preview
editable html
<hgroup>
  <h2>Heading Group</h2>
  <p>The text of the first <code>&lt;p&gt;</code> after the heading becomes muted — ideal for page titles with a description.</p>
</hgroup>

With Eyebrow

live preview
editable html
<hgroup>
  <mark>Eyebrow</mark>
  <h2>Heading Group</h2>
  <p>The first <mark>&lt;mark&gt;</mark> direct child of an hgroup gets special styling.</p>
</hgroup>