<hgroup>
Overview
The <hgroup> element groups a heading alongside its related content. Specifically, it may encompass an <h1> – <h6> heading combined with one or more <p> elements that offer additional contexts like subheadings, alternative titles, or taglines.
Examples and Usage
Building on the element's purpose, it's worth noting that it's designed to help structure web content more intuitively. With <hgroup>, developers can convey hierarchies or relationships between a main heading and its supplementary content. The flexibility is particularly evident with the inclusion of paragraphs and script-supporting elements, which allow interactivity or dynamic content presentation related to the primary heading.
<hgroup id="webRefIntro">
<h1>Welcome to Web Reference</h1>
<h2>Your guide to all things web development</h2>
<p>From the basics of HTML to advanced JavaScript techniques.</p>
</hgroup>
<section>
<p id="webRefContent">Learn about HTML, CSS, and JavaScript...</p>
</section>
In the example above, the <hgroup> element provides a structured presentation, starting with a main heading, followed by a subheading, and a brief description. To improve further, assigning id attributes, like webRefIntro and webRefContent, can facilitate better webpage navigation and referencing.
Attribute Breakdown
The <hgroup> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.
Accessibility Aspects
Presently, the <hgroup> lacks intrinsic accessibility semantics. What this means is that browsers present the content within it (the heading and any accompanying paragraphs) to accessibility APIs based purely on its internal content, without special significance to the grouping itself.
On the ARIA front, the <hgroup> doesn't have a dedicated ARIA role. It gets treated with a generic role, which is not typically recommended for use. The reason is, it doesn't provide any specific accessibility benefit. Still, global aria-* attributes applicable to permitted roles can be used. In cases where an <hgroup> houses multiple headings, assistive technologies might perceive the highest-ranked heading as the primary one, treating additional headings akin to standard paragraph elements.
Associated Elements
<h1>-<h6><p><section><article><nav><aside><header><footer>
Additional Notes
In document outlines or summaries, the content of the
<hgroup>is typically determined by the highest-ranked<h1>–<h6>descendant within the element. If multiple elements share the highest rank, the first one is selected. In the absence of any heading, the rank defaults to that of an<h1>.The
<hgroup>signifies the heading of a section. It's primarily used to group multiple heading levels, combining main headings with elements like subheadings or taglines.Other heading content within the
<hgroup>often serves as subheadings or secondary titles.The inclusion of
<hgroup>can mask secondary titles (like an<h2>) from certain outlining algorithms, ensuring only the primary title is highlighted.
Browser Compatibility
For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | Yes | Yes* | Yes | Yes | Yes | Yes* |