The hgroup Element

Technical Deep Dive & Specifications

The History: Deprecation and Revival of <hgroup>

The <hgroup> element has one of the most fascinating histories in the HTML standard:

1. HTML5 (2008–2013): Originally designed to contain multiple heading tags (e.g., <hgroup><h1>Title</h1><h2>Subtitle</h2></hgroup>). Screen reader vendors refused to hide the <h2> from the outline, causing widespread accessibility failures. The W3C deprecated <hgroup> in 2013.
2. WHATWG Revival (2020–Present): The WHATWG redefined <hgroup> with a brand-new content model. Instead of containing multiple headings, it contains exactly one heading (<h1>–<h6>) paired with one or more <p> elements representing subtitles, alternative titles, or taglines.

       +-------------------------------------------------------------+
       |             MODERN <hgroup> CONTENT MODEL                   |
       +-------------------------------------------------------------+
       | <hgroup>                                                    |
       |   <h1>Main Document Title</h1>  ◄── Exactly ONE Heading     |
       |   <p>Secondary Subtitle</p>     ◄── One or more <p> tags   |
       |   <p>Catchy marketing tagline</p>                            |
       | </hgroup>                                                   |
       +-------------------------------------------------------------+

WHATWG Specification Rules for <hgroup>

According to the modern WHATWG Living Standard:

• Allowed Children:
  • Exactly one heading element (<h1>, <h2>, <h3>, <h4>, <h5>, or <h6>).
  • Zero or more <p> elements representing subheadings, subtitles, alternative titles, or taglines.
  • Script-supporting elements (<script>, <template>).
• Forbidden Children: You cannot place arbitrary <div>, <section>, <ul>, or <button> elements directly inside an <hgroup>.

Accessibility Tree Mapping & Screen Reader Support

Modern browsers map <hgroup> to the accessibility tree as a group landmark or semantic container.

DOM Tree:                               Accessibility Object Model (AOM):
<hgroup>                          ───►  Role: group
  <h1>Autonomous Robotics</h1>          ├── Role: heading, Level: 1, Name: "Autonomous Robotics"
  <p>Principles of SLAM</p>             └── Role: paragraph, Content: "Principles of SLAM"
</hgroup>

When a screen reader user navigates by headings (pressing H), the reader lands on "Autonomous Robotics (Heading Level 1)". The subtitle is immediately available in the sequential reading buffer without cluttering the heading list.

Comparison: Subheading Markup Patterns

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 51–55 (<hgroup>...</hgroup>): The semantic group wrapper enclosing the article's complete title block.
• Line 52 (<p class="tagline">Research Publication • Issue 42</p>): A pre-title eyebrow/tagline marked up as a semantic paragraph rather than an unsemantic <h6>.
• Line 53 (<h1>Quantum Supremacy in Cryptography</h1>): The single primary heading element inside the group.
• Line 54 (<p>Analyzing post-quantum lattice-based encryption...</p>): The detailed subtitle marked up as a paragraph inside <hgroup>, preventing it from appearing as a false <h2> in the outline.
• Lines 58 & 65 (<h2>1. The Threat...</h2>, <h2>2. Lattice-Based...</h2>): The actual structural Level 2 sections follow cleanly, maintaining an immaculate document outline.

Expected Browser Render Output

RESEARCH PUBLICATION • ISSUE 42
Quantum Supremacy in Cryptography (Bold large title)
Analyzing post-quantum lattice-based encryption algorithms against Shor's algorithm.
─────────────────────────────────────────────────────────────────────────────

1. The Threat to Public-Key Infrastructure (Medium bold section title)
Shor's algorithm theoretically solves integer factorization...

2. Lattice-Based Cryptographic Candidates (Medium bold section title)
The National Institute of Standards and Technology (NIST)...