HTML <hgroup> Tag

The HTML <hgroup> tag represents a group of <h1>-<h6> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

The <hgroup> element allows you to attach a subtitle to a title without the subtitle being added to the document outline.

For example, you might have a level 1 heading, followed by a subheading in a level 2 heading. In this instance, the level 2 heading is different to the other level 2 headings in the document because it is an extension of the level 1 heading (i.e. it is a subheading of the heading).

Avoid this element if you need to make your documents W3C-compliant. See below for a "W3C-compliant" option.

Syntax

The <hgroup> tag is written as <hgroup></hgroup> with the grouped headings 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 headings being added to the document outline. This means that, semantically, the two headings start their own section or subsection. Therefore, the subtitle will represent a new section. This may or may not be your intention.

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

Because the headings are not contained within the <hgroup> element, the 2nd heading will appear in the document outline.

If it is not your intention to add the subtitle to the document outline (start a new section), you have 3 options:

Basic <hgroup> Tag Usage

By enclosing the heading elements inside the <hgroup> element, the <h2> element is not added to the document outline.

W3C-Compliant Option

Remember, the purpose of the <hgroup> element is to mask the subtitle/subheading etc from the document outline (this prevents it from appearing in a table of contents).

HTML5 (i.e. the W3C version of HTML) doesn't support the <hgroup> element. Only the WHATWG version (HTML Living Standard) supports this element. Therefore, if you need to make your documents W3C-compliant, you won't be able to use this element.

Also, W3C explicitly states that <h1>-<h6> elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

If you do not want the subtitles to be included the document outline (table of contents) and they are not intended to signify the start of a new section, check out the examples below.

Option 1

You can use the <p> tag to mark up the subtitle. 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.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <hgroup> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <hgroup> tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML5 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 Handler Content Attributes

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.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <hgroup> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The <hgroup> element doesn't actually exist in HTML 4 or the HTML5 specification. The element was introduced (and subsequently dropped) in HTML 5.

The <hgroup> element is included in the WHATWG Living Standard specification.

For more details on the element, see HTML5 <hgroup> Tag.

Template

Here's a template for the <hgroup> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

Note that the <hgroup> element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5 <hgroup> Tag.

Tag Details

For more details about the <hgroup> tag, see HTML5 <hgroup> Tag.

Specifications

Here are the official specifications for the <hgroup> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Related