Summary

The use of heading tags ensures users do not have to rely on visual styling to understand and navigate the document outline.

Techniques

Examples

Example 1 — Numbered headings

The heading number is decreased by one to match each subsection (h1, h2, h3).

<section role="doc-part" aria-labelledby="hd01">
  <h1 id="hd01">Book One: 1805</h1>
     <section role="doc-part" aria-labelledby="hd02">
       <h2 id="hd02">Part 1</h2>
         <section role="doc-chapter" aria-labelledby="hd03">
           <h3 id="hd03">Chapter 1</h3>
Example 2 — Separate heading and subtitle

The title and subtitle are grouped in a hgroup element to associate them.

Note that the aria-labelledby attribute only references the heading element instead of the entire hgroup to avoid the subtitle also being added to the accessible name.

<section role="doc-chapter" aria-labelledby="hd01">
   <hgroup>
     <h1 id="hd01">ORIGIN OF THE WORLD.—FIRST DYNASTY.</h1>
     <p role="doc-subtitle">URANUS AND GÆA. (Cœlus and Terra.)</p>
   </hgroup>
   …
</section>
Example 3 — Headingless section

The aria-label attribute provides a meaningful title for a section that does not contain a visual heading.

<section role="region" aria-label="preamble">

Frequently Asked Questions

Can I use an h1 heading for every section?

The HTML outline algorithm has now been removed from the HTML specification — user agents and assistive technologies never supported this feature. If you use an h1 heading for every section, they will all appear as top-level headings to assistive technologies, impeding users' ability to navigate the content.

Should heading levels be sequential?

Headings should reflect the hierarchy of the publication, so an h2 should always be used for secondary level headings, h3 for tertiary, and so on. Avoid gaps in numbering whenever possible (e.g., using h3 for headings below an h1).

Using consistent numbering ensures that users are not confused by the structure of a publication. Assistive technologies provide shortcut keys that allow users to move through the content effectively by heading number, for example. If there are gaps in the numbering, users may not realize there are subsections depending on how they try to navigate (i.e., trying to navigate to a specific heading level will not work; only the generic move to next heading option will).

Wasn't hgroup not recommended for a long time?

Yes, the element was originally part of the HTML outline algorithm, a feature that was never implemented by browsers or assistive technologies. It allowed multiple heading elements to be grouped, but only one heading was supposed to apply to the document. Following this model would cause assistive technologies to announce all the headings in the tag, however.

The removal of the outline algorithm from HTML along with a change to the element's content model now makes it invalid to include more than one heading element, so it cannot cause the problem with assistive technologies anymore.

It was previously recommended to wrap the heading and any subtitles in a header element, but document headers can contain more than just the title and subtitles. Using hgroup provides a more meaningful way to group these headings. You can include an hgroup inside a header to combine a heading group with other header content.

Explanation

Headings are one of the primary means of navigation for users of assistive technologies.

Each section should have a numbered heading (e.g., h1) that reflects its level in the document hierarchy, as numbered headings allow assistive technologies to navigate the document structure.

Each heading element must represent a single heading. Do not break a heading up into separate tags for visual formatting. If you need to include subheadings, incorporate them into the main heading or include them in a subsequent paragraph, using a header tag to encapsulate the full heading.

If a section of text does not have a heading, include a heading in an aria-label attribute on the enclosing element. Assistive technologies will announce this label and alert users that a new section is starting.

Note

Do not use heading elements within figure, blockquote and other HTML5 sectioning root elements. Although these features may have titles, using heading elements will force users to navigate through them to find the next section.

Heading groups

The hgroup element solves the need for multi-level headings that act as a single unit.

The element takes a single numbered heading tag (h1 to h6) for the section heading, but also allows multiple p tags to be included in the group to define any subtitles (refer to example 2). This pattern avoids the problem of using numbered heading for the subtitle, which can confuse readers into thinking a new section is starting.

It also avoids the problem of using a header element to group the heading with its subtitle, as the header element can contain more than just the title and subtitles (e.g., headers might also include epigraphs, images, etc.). A heading group can be added to a header element when there is additional content:

<section id="c01" aria-labelledby="c01-hd">
   <header>
      <img src="graphics/chapter-marker.png" alt=""/>
      <hgroup>
         <h2 id="c01-hd">Chapter 1<h2>
         <p role="doc-subtitle">Let there be light</p>
      <hgroup>
      <p role="doc-epigraph">Now the earth was formless and void, 
         and darkness was over the surface of the deep.</p>
   </header>
   …
</section>

Related Links