The <hgroup> Element
As defined in the HTML Living Standard, the <hgroup> element represents a heading and any related content, such as subheadings, alternative titles, or taglines.
Native Standards
Building the foundation of the modern web
<hgroup>
<h1>Main Title</h1>
<p>This is the subheading or tagline.</p>
</hgroup>
View HTML Living Standard: The hgroup element
Technical requirements
- Children: An
<hgroup>element typically contains one<h1>–<h6>element and one or more<p>elements. - Purpose: It groups these items together so they are treated as a single unit in terms of sectioning and the document outline.
- Spec Evolution: Historically,
<hgroup>was used to group multiple heading tags. The current standard specifies that it groups a heading with non-heading descriptive text (paragraphs).
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <hgroup>, you explicitly define the relationship between a heading and its tagline. This prevents assistive technology from treating the tagline as an unrelated paragraph. It signals that the content inside is part of the "name" or introduction of the current section.
Document Outline Management
A primary benefit of <hgroup> is that it prevents subheadings (often styled smaller but semantically linked) from creating unnecessary "noise" in a document's heading outline.
A11y Tip: Heading Levels
Avoid putting multiple heading tags (e.g., <h1> and <h2>) inside the same <hgroup> if they represent the same title. Instead, use a single heading for the main name and a paragraph for the secondary text. This ensures screen reader users hear a clean, logical outline when navigating by headings.