Headings

Use proper heading elements to indicate the page’s content structure

Section headings with large or bold text can help visual users quickly scan and understand web pages for efficient navigation.

When heading elements are correctly applied (e.g., <h1>...<h6>), they provide the same type of efficient navigation to individuals with visual disabilities. Proper heading elements allow assistive technologies to quickly identify the headings on the page.

Without heading markup, users of assistive technologies are not able to skip through irrelevant content and navigate the page effectively. Some users will have to wade line-by-line through a web page with missing or improper section headings.

Heading level order and arrangement

HTML headings are classified starting with level 1 and ending at level 6. Headings on well-designed web pages will form an outline of the page’s content.

Level 1 is the "highest" level of the outline. A <h1> element should be used to indicate the main content of the page.

Higher numbers indicate subsections. Taken together, the headings should form a well-structured hierarchy. For example:

  • Heading level 1

    • Heading level 2

      • Heading level 3

      • Heading level 3

    • Heading level 2

      • Heading level 3

        • Heading level 4

        • Heading level 4

Benefits

These measures allow the users of assistive technologies to:

  • detect the sections (or subjects) covered on the page
  • understand different sections of related content
  • navigate quickly to any specific section
  • allow search engines to detect the page’s main topics

Examples

<!doctype html>
<html lang="en-US">
  <head>
    <title>Proper Heading Structure - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    …
    <main role="main">
      <h1>Provide proper heading structure</h1>
      …
      <h2>Understanding heading levels</h2>
      …
      <h2>Example code</h2>
      …
      <h3>Typical HTML heading markup:</h3>
      …
      <h2>Best practices:</h2>
      …
    </main>
    …
  </body>
</html>

Best practices

  • Check for at least one level-1 heading on every page.
  • Apply appropriate HTML markup to any text that looks like a heading.
  • Begin every page section or topic with an HTML heading.
  • Verify that all text marked up as HTML headings serve a proper function and are not simply used for appearance.
  • Arrange the heading hierarchy in meaningful order:
    • Headings should not skip levels.
    • Each heading level should correctly indicate its relationship to other sections.

Relevant standards

WCAG 2.0 SC 1.3.1 (Level A) - Info and Relationships
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

WCAG 2.0 SC 2.4.6 (Level AA) - Headings and Labels
Headings and labels describe topic or purpose.