HTML <hgroup> Tag

The HTML <hgroup> tag represents a heading together with related secondary content, such as a subheading, alternative title, or tagline.

The <hgroup> element groups a single <h1>-<h6> element with one or more <p> elements. The <p> elements can appear before the heading, after it, or both, but exactly one heading element is required.

Only the single heading inside the <hgroup> element is exposed to assistive technology (such as a screen reader's list of headings) as an actual heading. The <p> elements are not treated as headings, so a subtitle or tagline marked up this way won't be mistaken for the start of a new section when someone navigates a page by its headings.

The <hgroup> element was dropped from an early draft of the HTML5 specification and its behavior changed over the years. It's now a standard part of the HTML Living Standard (the single specification maintained jointly by WHATWG and W3C) and is well supported across current browsers.

Syntax

The <hgroup> tag is written as <hgroup></hgroup> with a heading and one or more paragraphs enclosed between the start and end tags.

Like this:

Examples

The Problem

Before we look at the examples, let's make sure we understand the problem first.

You could quite easily use two headings to represent a title and its subtitle without using the <hgroup> tag. Like this:

However, this would result in both elements being exposed as separate headings. Semantically, this makes it look like the second heading starts its own section or subsection, when it's really just a subtitle for the first heading. This may or may not be your intention.

So if your intention is for the subtitle/subheading/tagline etc to be treated as its own heading, you don't need to use the <hgroup> tag. You can simply use another heading element (<h1>-<h6>) to mark up the subtitle/subheading.

If it is not your intention for the subtitle to be treated as its own heading, you have a few options:

Basic <hgroup> Tag Usage

By enclosing the heading and a <p> element inside the <hgroup> element, the subtitle is not exposed as a heading in its own right.

Note that the <hgroup> element's content model only permits one heading element (<h1>-<h6>), along with zero or more <p> elements before and/or after it. Putting two heading elements inside a single <hgroup> element (e.g. an <h1> followed by an <h2>) is not valid.

Alternatives to <hgroup>

If you'd rather not use the <hgroup> wrapper element at all, here are a few other common approaches for marking up a subtitle without it being treated as a heading in its own right.

Option 1

You can use the <p> tag to mark up the subtitle, without wrapping it (or the heading) in <hgroup>. These elements could be placed inside a <header> element.

You could also use CSS to style the subtitle if desired.

Option 2

You could include the subtitle in the same heading as the title, separated by a colon.

Option 3

You could take the previous example a step further by adding a <br> tag and a <span> tag to separate the subtitle from the title. This will enable you to separate the styles between the title and subtitle.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <hgroup> element accepts the following attributes.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <hgroup> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.