HTML Tags
HTML <hgroup> Tag
Learn how the HTML <hgroup> tag groups a heading with a subheading, alternative title, or tagline.
The
<hgroup>tag represents a heading and its related secondary content.
It groups one<h1>to<h6>element with one or more<p>elements containing a subheading, alternative title, or tagline.
Syntax
html
<hgroup>
<h1>Main heading</h1>
<p>Subheading or tagline</p>
</hgroup>Attributes
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for CSS styling. |
| id | Defines a unique identifier for the element. |
| style | Adds inline CSS styles. |
| title | Provides additional information as a tooltip when hovered. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hgroup Tag Example</title>
<style>
hgroup {
border-left: 4px solid #29AB87;
padding-left: 16px;
}
hgroup h1 {
margin-bottom: 4px;
}
hgroup p {
margin-top: 0;
color: #555;
font-size: 1.1rem;
}
</style>
</head>
<body>
<hgroup>
<h1>Learn Modern HTML</h1>
<p>A beginner-friendly guide to semantic webpages</p>
</hgroup>
<p>Start with meaningful elements and build accessible content.</p>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <hgroup> element is supported by all major modern browsers.
Notes
- Use one
<h1>to<h6>element inside an<hgroup>. - Write secondary content such as a subheading, alternative title, or tagline inside
<p>elements. - The heading element, not the
<hgroup>itself, contributes to the document outline. - Do not use multiple heading elements inside the same
<hgroup>. - Both the opening and closing tags are required.
Conclusion
The <hgroup> tag provides a semantic way to keep a heading together with its supporting title content.
Use it when a heading needs a subheading, alternative title, or tagline represented by one or more paragraphs.