How to use Heading Structure Analyzer
- Paste a section or a whole page into the Page HTML box.
- The table updates as soon as the HTML is in the box.
- Read the level of each heading in the table, then the indented outline under it to see the shape of the page.
- Fix the order gaps and the empty headings first, because a screen reader hears the outline in that order.
Example: Heading Structure Analyzer
Outline an article and find the missing level above a subheading.
Options
- Order gap
- An order gap is a step down of more than one level, such as h2 straight to h4. Going back up the levels, such as h4 to h2, is normal and is not reported. The gap is a signal to look at the section, not a rule that every page must follow the same shape.
- First-level heading
- The reader reports how many h1 elements the pasted HTML contains, and whether the first heading is one of them. Some layouts place the page title outside the pasted section, so check the full page before changing a heading for this reason alone.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Why the order of headings carries meaning
A heading element does two jobs at once: it labels the section below it and it places that section in the page outline. People who use a screen reader can jump from heading to heading and hear that outline, so a level that jumps from h2 to h4 reads as a section that arrived without its parent. Visual styling is a separate decision: a heading can be made smaller with CSS without changing its level, and a smaller level should not be chosen only to make the text look smaller. The World Wide Web Consortium's page structure guidance asks for headings that are properly nested, which is exactly what this outline makes visible.
W3C Web Accessibility Initiative, Page Structure tutorial: Headings
Questions about Heading Structure Analyzer
Is more than one h1 a real problem?
HTML allows more than one h1, and the outline still reads in order. What matters more is that each heading describes the section under it and that the levels do not skip. The page reports the count so you can decide, and it does not treat a second h1 as a fault on its own.
What counts as an order gap?
A step down of more than one level, such as h2 straight to h4. Going back up is normal and is not reported. A gap usually means a section was styled to look smaller without an intermediate heading above it.
Why is a heading I can see not in the outline?
The reader looks for h1 to h6 elements in the pasted HTML. Text styled to look like a heading without a heading element is not read, and neither is a heading added by JavaScript after the page loads. Paste the rendered page source and run it again.
Does a clean outline mean the page is accessible?
No. This page checks the heading elements in the markup you paste and nothing else. Contrast, keyboard order, link text, image alternatives and the rest of accessibility are separate checks, and several of them need a real browser.