Headings

Headings remain 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, regardless of their support for HTML5, 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 (Example 2 shows both usage examples).

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.

Examples

Example 1 — Numbered headings

<section epub:type="division">
  <h1>Book One: 1805</h1>
      <section epub:type="chapter">
         <h2>Chapter 1</h2>

Example 2 — Headings and Subtitles

Combined

<section epub:type="chapter">
   <h1><span epub:type="title">ORIGIN OF THE WORLD.—FIRST DYNASTY.</span>
   <span epub:type="subtitle">URANUS AND GÆA. (Cœlus and Terra.)</span></h1>

Using header

<section epub:type="chapter">
   <header>
      <h1>ORIGIN OF THE WORLD.—FIRST DYNASTY.</h1>
      <p epub:type="subtitle">URANUS AND GÆA. (Cœlus and Terra.)</p>
   </header>

Example 3 — Headingless sections

title attribute

<section epub:type="preamble" title="preamble">
   <p>
      How these papers have been placed in sequence 
      will be made manifest in the reading of them.
      …
   </p>
</section>

aria-label attribute

<section epub:type="preamble" aria-label="preamble">

Compliance References and Standards

HTML5 — The h1, h2, h3, h4, h5, and h6 elements
HTML5 — Headings and sections
HTML5 — Subheadings, subtitles, alternative titles and taglines
WCAG 2.0 — H42: Using h1-h6 to identify headings
WCAG 2.0 — H69: Providing heading elements at the beginning of each section of content
WCAG 2.0 — G130: Providing descriptive headings
WCAG 2.0 — G141: Organizing a page using headings

Additional Resources

HTML5 semantics and accessibility

Frequently Asked Questions

Why not use generic h1 headings?: Reading systems and assistive technologies do not support the outline algorithm defined in HTML5. If you use an h1 heading for every section, they will all appear as top-level headings to a user, impeding their ability to navigate.