How to use the html heading outline checker
- Paste the HTML of a page, or a part of it, into the box.
- Read the number of problems and the outline table, which lists every heading in page order with its line number and level.
- Look at the problem column to see where a level is skipped, a heading is empty or there is more than one level 1.
- Fix the HTML, paste it again and check that the count falls to zero.
Formula
headings = h1 to h6 elements and elements with role="heading" (aria-level, or 2 if none)
skipped level: a heading is more than one level below the one before it
no level 1, or more than one level 1
empty heading: no text once tags and spaces are removed
Headings that are hidden with the hidden attribute, aria-hidden or display none are listed but left out of the checks, because visitors and screen readers do not see them.
A skipped level
The default snippet has an h1, an h2, an h4, another h2 and an h3. The h4 comes right after an h2, so it skips level 3, and the tool reports one problem on line 3: it skips from level 2 to level 4. The other headings are in order, because going back up to a lower level is fine.
In a messier page, a page that starts with an h2, has two h1 headings, jumps from h1 to h4 and has an empty role heading gives four problems, and a hidden h3 is listed but not counted. A page with only an h2 and an h3 reports no level 1 and a start at level 2.
Why heading order matters
Screen reader users often move through a page by headings, much like scanning a table of contents. A skipped level or an empty heading breaks that picture, and a missing or doubled top-level heading makes it unclear what the page is about. The same structure helps everyone who skims.
To pull the plain text from the page, see the HTML to Text Converter. The JSON-LD Schema Generator adds structured data, and the Color Contrast Checker checks the colors of the text. The HTML Table Generator builds tables for pages like this one.
What counts as a problem
HTML itself allows more than one h1 and does not require levels to be in order, so some of these flags are matters of style and accessibility guidance. Treat each as a prompt to look at the page. A page that is a fragment may start below level 1 on purpose.
Assumptions and limits
- The HTML is read as text by a tolerant reader and is not run, so scripts and styles have no effect.
- Headings made by scripts after the page loads are not in the pasted source.
- A role heading without aria-level counts as level 2, as the standard says.
- Comments, scripts and styles are ignored, and character codes such as & are decoded.
- Up to 400,000 characters are accepted, and nothing is uploaded.
Frequently asked questions
Is it wrong to have more than one h1?
HTML allows it, but many accessibility and writing guides advise one per page. The tool flags it so you can decide.
Why is going from h4 back to h2 not a problem?
Only moving deeper by more than one level is flagged. Going back up to a lower number starts a new section.
Does it read headings added by JavaScript?
Only if they are in the HTML you paste. Copy the rendered HTML from your browser tools if the page builds its headings with scripts.
What does hidden mean in the problem column?
The heading is hidden from visitors by an attribute or style, so it is listed but not counted in the checks.