Web/HTML/Element/hgroup

The HTML <hgroup> element represents a multi-level heading for a section of a document. It groups a set of <h1>–<h6> elements.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Content categories	Flow content, heading content, palpable content.
Permitted content	One or more `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, and/or `<h6>`.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

Attributes

This element only includes the global attributes.

Usage notes

The <hgroup> element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away. However, given that a key purpose of the <hgroup> element is to affect how headings are displayed by the outline algorithm defined in the HTML specification—but the HTML outline algorithm is not implemented in any browsers—then the <hgroup> semantics are in practice only theoretical. So the HTML5 (W3C) specification provides advice on how to mark up Subheadings, subtitles, alternative titles and taglines without using <hgroup>.

The <hgroup> element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a multi-level heading.

In other words, the <hgroup> element prevents any of its secondary <h1>–<h6> children from creating separate sections of their own in the outline—as those <h1>–<h6> elements otherwise normally would if they were not children of any <hgroup>.

So in the abstract outline produced by the HTML outline algorithm defined in the HTML specification, the <hgroup> as a whole forms a single logical heading, with the entire set of <h1>–<h6> children of the <hgroup> going into the outline as one multi-level unit, to comprise that single logical heading in the abstract outline.

To produce any (non-abstract) rendered view of such an outline, some choice must be made in the design of the rendering tool about how to render <hgroup> headings in such a way as to convey their multi-level nature. There are a variety of ways an <hgroup> might be shown in a rendered outline; for example:

an <hgroup> might be shown in a rendered outline in with a colon character and space (“: ”) or other such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings
an <hgroup> might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s)

Consider the following HTML document:

<!DOCTYPE html>
<title>HTML Standard</title>
<body>
  <hgroup id="document-title">
    <h1>HTML</h1>
    <h2>Living Standard — Last Updated 12 August 2016</h2>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

A rendered outline for that document might look like the following:

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2017/02/05/14599/ffe21f018435f0f2a3475e9bee0b2680/outline-colon.png]]

That is, the rendered outline might show the primary title, HTML, followed by a colon and space, followed by the secondary title, Living Standard — Last Updated 12 August 2016.

Or, the rendered outline for that document might instead look like the following:

Rendered outline that includes an <hgroup> element, with parens around the secondary heading

That is, the rendered outline might show the primary title, HTML, followed by the secondary title shown in parentheses: (Living Standard — Last Updated 12 August 2016).

Examples

<hgroup id="document-title">
  <h1>HTML</h1>
  <h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<hgroup>' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`hgroup`	Chrome Full support 5	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support 11.1	Safari Full support 5	WebView Android Full support 2.2	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 11.1	Safari iOS Full support 4.2	Samsung Internet Android Full support Yes

Legend

Full support: Full support