On this page


What is expected

Heading levels should follow a clean, deliberate hierarchy:


Heading Level 1 <h1>

Heading Level 2 <h2>

Heading Level 3 <h3>

Heading Level 2 <h2>

Heading Level 3 <h3>

Heading Level 4 <h4>

Heading Level 2 <h2>

Who is impacted

A clean, hierarchical heading structure is important for all users.

What to check for

  • The page has a heading. In almost all pages there should be at least one heading.
  • All text that looks like a heading is actually marked up as a heading.
  • All text that is marked up as a heading is really a conceptual section heading, dividing the page content into logical chunks.
  • The heading hierarchy is meaningful. Ideally the page starts with an "h1" — which is usually similar to the page title — and does not skip levels; however, these are not absolute requirements.
  • Multiple H1s on a page are valid, but probably should be avoided, as they may cause confusion.
  • Avoid skipping headings or empty headings.

How to check this

Checking this will require either examining the source code of a web page, or the use of a tool or web service. If your web page is public, then you may use one of the web services mentioned below. For a page which is behind CAS authentication, you may either install and use the WAVE browser extension, or do it the tedious way.

The tedious but thorough way to check headings

  1. View the source code of the web page
  2. Identify the visual 'heading' elements.
  3. Check that all visual 'heading' elements use an <h> tag.
  4. Verify that all sub heading elements have a higher number.

To check headings on fully public pages using a web service.

Headings outline

  1. In any browser, open the W3C HTML Validator (The W3C Markup Validation Service).
  2. In the Address field, type the URI (e.g., www.w3.org).
  3. Click the More Options link.
  4. Select the Outline checkbox.
  5. Click the Check button
  6. The results page appears (with title starting either [Valid] or [Invalid]).
  7. In the results page, near the top, at the end of the "Jump to:" line, click the Outline text link.
  8. Non-visual checks:
    • Is there anything there? If there is no text between "Below is an outline for this document, automatically generated from the heading tags (<h1> through <h6>.)" and "If this does not look like a real outline..." it means there are no headings marked up on the page.
    • Does the outline start with [H1] and follow a deliberate hierarchy? (That's not required, but strongly suggested.)
  9. Visual checks: Compare the Document Outline to the visual rendering of the page.
    • Are the things that look like headings on the page listed in the Document Outline?
    • Are there things in the Document Outline that aren't really headings?

Headings markup in the page:

  1. Open WAVE web accessibility evaluation tool.
  2. Type the website address in the box after "Enter the URL of the web site you want to evaluate:"
  3. Click the "WAVE this page!" button.
  4. Your web page will show up in the browser with lots of little icons on it.
  5. Anything that is a functional heading should have a heading icon (<h1>, <h2>, <h3>, etc.) before it.
  6. Anything that is a not functional heading should not have a heading icon before it.
  7. Click the OUTLINE button on the WAVE panel to see the heading structure and the text of the headings.