Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <hgroup> Tag

Written by Published

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

AttributeDescription
classSpecifies one or more class names for CSS styling.
idDefines a unique identifier for the element.
styleAdds inline CSS styles.
titleProvides 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+
YesYesYesYesYesYes

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.

PreviousHTML <h1 to h6> TagNextHTML <p> Tag