HTML <hgroup> Tag
The HTML <hgroup> tag groups a heading with its subtitle or tagline. Learn the correct content model, syntax, and examples with W3docs.
The HTML <hgroup> tag groups a single heading (one of <h1>–<h6>) together with one or more <p> elements that act as its subtitle, tagline, or alternative title. Its job is to keep that supporting text tied to the heading instead of becoming a separate item in the document outline.
For example, a page title and its tagline belong together. Without <hgroup>, you would either mark the tagline as a lower heading (cluttering the outline) or as a plain paragraph (losing the visual/semantic association). <hgroup> solves this: the heading defines the outline entry, and the <p> content rides along with it.
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn HTML, CSS, and JavaScript online for free.</p>
</hgroup>Content model
This is the part most older tutorials get wrong. The current <hgroup> does not wrap several <h1>–<h6> siblings. Its content model is:
- exactly one heading element (
<h1>,<h2>,<h3>,<h4>,<h5>, or<h6>), plus - zero or more
<p>elements before and/or after that heading.
The <p> elements carry the subtitle, alternative title, or tagline. Only the single heading contributes to the page outline; the paragraphs are associated with it but do not create headings of their own.
Spec status
The <hgroup> element was removed from the HTML specification for several years, which is why much older documentation labels it as unsupported and advises against it. That advice is out of date: <hgroup> was restored to the WHATWG HTML Living Standard in 2022 with the simpler heading-plus-paragraphs content model described above. It is a valid element today.
<hgroup> is a valid element in the current WHATWG HTML Living Standard (restored in 2022). All modern browsers render its contents correctly. Note that it has no special built-in accessibility semantics — assistive technologies expose the heading inside it as a normal heading, and the <p> elements as ordinary text.
Syntax
The <hgroup> tag comes in pairs: both the opening <hgroup> and the closing </hgroup> tag are required.
Example of the HTML <hgroup> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Here you can learn the HTML basics.</p>
</hgroup>
</body>
</html>Example of the HTML <hgroup> tag used with CSS properties
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hgroup {
text-align: right;
font-family: Arial, sans-serif;
padding-right: 30px;
border-right: 15px solid #42c73a;
}
h1 {
font-size: 30px;
}
hgroup p {
margin: 0;
font-size: 18px;
color: #555;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<p>Learn online</p>
</hgroup>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Attributes
The <hgroup> tag has no element-specific attributes. It supports the Global Attributes and the standard event attributes.
Browser support
<hgroup> is supported in all modern browsers — Chrome, Firefox, Safari, and Edge — and is part of the current WHATWG HTML Living Standard. Because it has no default styling beyond being a block container, support effectively means the browser renders the heading and its paragraphs as expected.
Related tags
- HTML
<header>tag — introductory content for a page or section, where an<hgroup>title block often lives. - HTML
<h1>–<h6>tags — the heading elements you place inside<hgroup>. - HTML Headings — overview of how headings shape the document structure.