HTML <hgroup> Element
The HTML <hgroup> element groups a heading with related secondary content, such as a subtitle, alternative title, or tagline. It is useful when introductory text belongs directly with a heading but should not create another level in the document's heading hierarchy.
Syntax
<hgroup>
<h1>Main Heading</h1>
<p>A short subtitle or tagline.</p>
</hgroup>The <hgroup> element requires both an opening and closing tag. It contains one heading element and may include one or more paragraphs containing secondary content related to that heading.
Attributes
The <hgroup> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses an <hgroup> to associate a page heading with a short tagline. The tagline provides supporting information without creating an additional heading level.
Usage Notes
Use <hgroup> when a heading has related secondary content that belongs with it, such as a subtitle, alternative title, or tagline.
The secondary content inside an <hgroup> is typically placed in one or more <p> elements rather than additional heading elements. This keeps the supporting text from creating extra levels in the heading hierarchy.
The <hgroup> element should contain a single <h1> through <h6> heading. The heading level should be selected according to the structure of the surrounding document.
Do not use <hgroup> simply as a general-purpose container for headings and unrelated content. Use a <div>, <header>, or another appropriate structural element when the content does not represent a heading and its closely related secondary information.
Accessibility
The heading inside an <hgroup> should clearly describe the content that follows and use the appropriate heading level for its position in the document hierarchy.
Supporting text such as a subtitle or tagline should complement the heading rather than replace important information that users need to understand the section. Keeping secondary text in paragraphs also prevents it from appearing as an additional heading during heading-based navigation with assistive technologies.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <hgroup> Element .
Related Elements
<h1>-<h6> - Define six levels of headings used to organize the document's content hierarchy.
<header> - Represents introductory content that may contain headings, navigation, and other introductory information.
<p> - Represents a paragraph and can contain secondary text associated with the heading in an <hgroup>.