<hgroup>
Groups a heading together with a subtitle, tagline, or kicker.
- Display
- block
- Closing tag
- Required
- Permitted content
- One
<h1>-<h6>heading, plus<p>elements before or after it
Example
#<hgroup>
<h1>CodeWorlds</h1>
<p>Learn to code like you're playing an adventure game</p>
</hgroup>Definition and usage
#The <hgroup> element groups a heading together with text that accompanies it: a book’s subtitle, a site’s tagline, or a kicker like "Module 3 · Lesson 5." Inside it you place exactly one <h1>-<h6> heading, plus one or more <p> paragraphs before or after it.
<hgroup> used to group several headings, for example <h1> and <h2>. The standard changed that: a subtitle is now written in a <p>, so it doesn’t clutter up the page’s heading outline. If you come across a guide with two headings inside <hgroup>, that advice is now outdated.
Screen readers treat the subtitle as a plain paragraph, and only the actual heading shows up in the heading outline. The element itself has no particular look, so in CSS the subtitle is usually given a smaller font and a muted color.
Syntax
#<hgroup>
<h1>Title</h1>
<p>Subtitle</p>
</hgroup>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<hgroup>
<p style="margin: 0; font-size: 0.85rem; color: #f97316;">Module 3 · Lesson 5</p>
<h2 style="margin-top: 4px;">Loops and repeating code</h2>
</hgroup>Default CSS
#Most browsers display this element with these default styles:
hgroup {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write the subtitle in a
<p>, not in another heading. - Don’t wrap a lone heading with no subtitle in
<hgroup>. It adds nothing. - Style the subtitle so it’s clearly secondary, for example with a smaller font and a muted color.
Related entries
#- <h1>-<h6>Headings at six levels, from the most important h1 to the least important h6. Together they form the page’s outline.
- <header>An introduction to a page or section: logo, title, navigation, author info.
- <p>A paragraph of text.
- <section>A thematic part of a document, usually with its own heading.
- <article>Self-contained content that makes sense read or shared on its own.
Spotted a mistake or missing an example? Write to us.