Skip to content
html.sh

<hgroup> - Heading Group Element

The <hgroup> Element

Section titled “The <hgroup> Element”
Heading Group HTML5

The <hgroup> element groups a heading element (h1-h6) with one or more subheadings, subtitles, alternative titles, or taglines. It prevents subheadings from creating their own sections in the document outline, making it clear that they are subordinate to the main heading.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<hgroup>
  <h1>Main Heading</h1>
  <p>Subtitle or tagline</p>
</hgroup>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <hgroup> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Article with Subtitle

Section titled “Article with Subtitle”

A blog post or article with a main title and descriptive subtitle:

Result

Page Header with Tagline

Section titled “Page Header with Tagline”

A page or section header with a tagline:

Result

Product Title with Description

Section titled “Product Title with Description”

Product pages with titles and descriptive subtitles:

Result

Multi-line Heading

Section titled “Multi-line Heading”

Headings with alternative titles or translations:

Result

Event or Conference Header

Section titled “Event or Conference Header”

Event pages with date and location information:

Result

Landing Page Hero Section

Section titled “Landing Page Hero Section”

Hero sections with main heading and supporting text:

Result

Book or Chapter Title

Section titled “Book or Chapter Title”

Book chapters with titles and subtitles:

Result

What Can Go Inside hgroup

Section titled “What Can Go Inside hgroup”

The <hgroup> element should contain:

  1. One heading element (h1-h6) - The primary heading (required)
  2. One or more <p> elements - For subtitles, taglines, or alternative titles
<!-- Valid: h1 with p elements -->
<hgroup>
  <h1>Main Title</h1>
  <p>Subtitle</p>
  <p>Additional tagline</p>
</hgroup>


<!-- Valid: Any heading level -->
<hgroup>
  <h2>Section Title</h2>
  <p>Section subtitle</p>
</hgroup>


<!-- Invalid: Multiple heading elements -->
<hgroup>
  <h1>Title</h1>
  <h2>Subtitle</h2><!-- Should be <p> instead -->
</hgroup>


<!-- Invalid: Non-heading, non-p elements -->
<hgroup>
  <h1>Title</h1>
  <span>Subtitle</span><!-- Should be <p> -->
</hgroup>

Best Practices

Section titled “Best Practices”

Use for Actual Subtitles

Section titled “Use for Actual Subtitles”

Only use <hgroup> when you have a genuine subtitle or tagline:

<!-- Good: Genuine subtitle -->
<hgroup>
  <h1>Understanding CSS Grid</h1>
  <p>A practical guide to two-dimensional layouts</p>
</hgroup>


<!-- Avoid: Misusing for other content -->
<hgroup>
  <h1>Article Title</h1>
  <p>By Author Name</p><!-- This is metadata, not a subtitle -->
</hgroup>


<!-- Better: Separate metadata -->
<h1>Article Title</h1>
<p class="byline">By Author Name</p>

Don’t Use Multiple Headings

Section titled “Don’t Use Multiple Headings”

Use only one heading element per <hgroup>:

<!-- Wrong: Multiple heading elements -->
<hgroup>
  <h1>Main Title</h1>
  <h2>Subtitle</h2>
</hgroup>


<!-- Correct: h1 with p -->
<hgroup>
  <h1>Main Title</h1>
  <p>Subtitle</p>
</hgroup>

Style Paragraphs Appropriately

Section titled “Style Paragraphs Appropriately”

Style the paragraph elements to look like subtitles:

<hgroup>
  <h1 style="font-size: 2.5rem; margin: 0;">Main Title</h1>
  <p style="font-size: 1.25rem; margin: 0.5rem 0 0 0; color: #666; font-weight: normal;">
    This is styled as a subtitle
  </p>
</hgroup>

Use Semantic HTML

Section titled “Use Semantic HTML”

Combine <hgroup> with other semantic elements:

<article>
  <header>
    <hgroup>
      <h1>Article Title</h1>
      <p>Article subtitle</p>
    </hgroup>
    <p class="byline">By Author | Date</p>
  </header>


  <p>Article content...</p>
</article>

Accessibility

Section titled “Accessibility”

Document Outline

Section titled “Document Outline”

The <hgroup> element affects the document outline by treating the entire group as a single heading:

<!-- Without hgroup: Two separate headings in outline -->
<h1>Main Title</h1>
<h2>Subtitle</h2>


<!-- With hgroup: Single heading in outline -->
<hgroup>
  <h1>Main Title</h1>
  <p>Subtitle</p>
</hgroup>

Screen Reader Behavior

Section titled “Screen Reader Behavior”

Screen readers typically announce the heading element and may treat paragraph elements as regular text:

<!-- Screen reader might announce: "Heading level 1: Main Title. Subtitle text." -->
<hgroup>
  <h1>Main Title</h1>
  <p>Subtitle text</p>
</hgroup>

ARIA Considerations

Section titled “ARIA Considerations”

The <hgroup> element has no implicit ARIA role. The heading inside maintains its role:

<hgroup>
  <h1>Title</h1><!-- role="heading" aria-level="1" -->
  <p>Subtitle</p><!-- Regular text -->
</hgroup>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome5+
Firefox4+
Safari5+
EdgeAll versions
IE9+

Historical Context

Section titled “Historical Context”

The <hgroup> element has an interesting history:

  1. Introduced in HTML5 - Originally part of the HTML5 specification
  2. Removed - Taken out of the W3C HTML5 specification due to lack of implementation
  3. Reintroduced - Added back to the WHATWG Living Standard with clearer semantics
  4. Current status - Valid HTML with specific use cases for subtitles and taglines
Section titled “Related Elements”

Contains introductory content, often includes hgroup. Learn more →

Common Mistakes

Section titled “Common Mistakes”

Using for Metadata

Section titled “Using for Metadata”
<!-- Wrong: Metadata in hgroup -->
<hgroup>
  <h1>Article Title</h1>
  <p>By Jane Doe | March 15, 2025</p>
</hgroup>


<!-- Correct: Separate metadata -->
<hgroup>
  <h1>Article Title</h1>
  <p>A comprehensive guide</p>
</hgroup>
<p class="byline">By Jane Doe | March 15, 2025</p>

Multiple Heading Elements

Section titled “Multiple Heading Elements”
<!-- Wrong: Multiple headings -->
<hgroup>
  <h1>Main Title</h1>
  <h2>Subtitle</h2>
  <h3>Sub-subtitle</h3>
</hgroup>


<!-- Correct: One heading with p elements -->
<hgroup>
  <h1>Main Title</h1>
  <p>Subtitle</p>
  <p>Sub-subtitle</p>
</hgroup>

Overusing hgroup

Section titled “Overusing hgroup”
<!-- Wrong: Using hgroup when not needed -->
<hgroup>
  <h1>Simple Title</h1>
</hgroup>


<!-- Correct: Just use the heading -->
<h1>Simple Title</h1>


<!-- Use hgroup only when you have subtitles -->
<hgroup>
  <h1>Title</h1>
  <p>With a subtitle</p>
</hgroup>

Invalid Child Elements

Section titled “Invalid Child Elements”
<!-- Wrong: Invalid children -->
<hgroup>
  <h1>Title</h1>
  <span class="subtitle">Subtitle</span>
  <div>Extra content</div>
</hgroup>


<!-- Correct: Only h1-h6 and p -->
<hgroup>
  <h1>Title</h1>
  <p>Subtitle</p>
</hgroup>

Specifications

Section titled “Specifications”