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).

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:

• use the <hgroup> tag (not W3C-compliant)
• use a non-heading element for the subtitle (W3C-compliant)
• include the subtitle in the same heading element as the title (W3C-compliant)

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.

The <hgroup> element accepts the following attributes.

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.

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

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.

• onabort
• onauxclick
• onblur
• oncancel
• oncanplay
• oncanplaythrough
• onchange
• onclick
• onclose
• oncontextmenu
• oncopy
• oncuechange
• oncut
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformdata
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onlanguagechange
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onpaste
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreset
• onresize
• onscroll
• onsecuritypolicyviolation
• onseeked
• onseeking
• onselect
• onslotchange
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• onwaiting
• onwheel

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.