HTML `<hgroup>` Tag

The <hgroup> tag is used to group HTML Headings. We use <hgroup> to wrap one or more heading elements from <h1> - <h6>.

The <hgroup> tag allows to group the primary heading with secondary headings forming a multi-level heading. It prevents any secondary <h1> - <h6> children from creating their separate sections.

In the abstract outline <hgroup> forms one logical heading, with an overall set of <h1> - <h6> children which go into the outline as one multi-level unit. An <hgroup> element can be shown in a rendered outline in many ways:

It can be shown with a colon character and space or other punctuation after the primary heading and before the first secondary heading.
It can be shown with the primary heading, which is followed by secondary headings in parentheses.

DANGER

The <hgroup> is not supported in HTML5, but it's supported in WHATWG Living Standard specification. The future of the element isn’t yet clear, that’s why it is better to avoid using this tag.

Syntax

The <hgroup> tag comes in pairs. However, the closing tag isn’t required.

Example of the HTML `<hgroup>` tag:

Example of the HTML <hgroup> Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
    </hgroup>
  </body>
</html>

Result

hgroup tag example

Example of the HTML `<hgroup>` tag used with CSS properties:

Example of the HTML <hgroup> tag with the CSS properties:

html

<!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;
      }
      h2 {
        font-size: 20px;
      }
      p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Learn online</h2>
    </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 supports the Global Attributes.

How to style an HTML <hgroup> Tag

json

{
    "tag_name": "hgroup"
}

Practice

What is the primary purpose of the HTML <hgroup> tag?

To create a hyperlinkTo group a set of <h1>–<h6> elements when the heading has multiple levels.To embed multimedia contentTo define a header for a document or sectionTo downplay the importance of the lower ranked header

HTML <hgroup> Tag ​

Syntax ​

Example of the HTML <hgroup> tag: ​

Result ​

Example of the HTML <hgroup> tag used with CSS properties: ​

Attributes ​