What the HTML Semantic Outline Checker does
This checker draws a page's heading outline and landmark map from its HTML, then reports what breaks the structure: skipped heading levels, empty headings, a missing or duplicated main region, unnamed duplicate navigation, a missing lang attribute, list and table markup that confuses assistive technology - each with a corrected snippet.
Screen reader users rarely read a page from top to bottom. They pull up a list of headings or landmarks and jump. Search engines and AI systems lean on the same structure to understand what each part of a page is about. If the outline is wrong, both groups get a distorted picture of the page, even when it looks fine.
How to use it
- Paste the page's HTML, or enter a public URL and press Fetch page HTML. Pages that build their content in the browser need the rendered HTML from DevTools instead.
- Press Check outline. The outline shows every visible heading indented by level, with skipped levels and empty headings highlighted.
- Read the landmark map: banner, navigation, main, complementary, contentinfo, search, and named regions and forms, with their names and nesting.
- Work through the findings from the top. Each one says what is wrong, why it matters and what to change, usually with the corrected tag.
- Copy the outline into a ticket, or download the Markdown report or the CSV of findings.
Reading the results
Problems are the things that remove information: no main, no lang, empty headings, no headings at all. Warnings distort it: a jump from h2 to h4, several unnamed nav elements, a data table without header cells, invalid list children. Notes are conventions worth considering, such as having more than one h1.
HTML allows several h1 elements and never defined a working outline algorithm based on sectioning elements, so browsers and screen readers use heading levels as written. That is why this tool takes the levels at face value: an h1 inside a section is still reported as level 1.
Landmarks come from HTML elements with implicit roles - header and footer count as banner and contentinfo only when they are not inside article, aside, main, nav or section - and from explicit ARIA roles. A section becomes a region landmark only when it has an accessible name, and a form only when it is named.
Worked example: a small company home page built from divs
The "Page with problems" example has no lang, no main, and its layout is all div elements. The outline is h2 "Welcome to Acme", h4 "Consulting", h4 "Training" and an empty h2 - four headings, no h1, a skip from level 2 to level 4 and one heading with no text.
The landmark map shows two navigation landmarks and nothing else, both unnamed, so a screen reader lists them as "navigation" twice. The price table has no th cells, so "£10" is read without "Price", and the services list contains a div directly inside ul, which breaks the item count.
The fixes are small: <html lang="en">; header, main and footer in place of the three layout divs; the h2 becomes the h1 and the h4s become h2s; aria-label="Primary" and aria-label="Footer" on the two navs; <th scope="col"> for the table's first row; and the stray div wrapped in li. Re-running the check then shows a clean outline of one h1 and three h2s.
Limitations: what the result does not prove
- It reads the HTML supplied. CSS that hides or reorders content, and content injected by script, are not seen - the
hiddenattribute,aria-hiddenand inline styles are. - It can check that headings exist and are nested in order, not that their wording describes the section beneath them. That judgement stays with you.
- A clean outline is necessary but not sufficient for accessibility. Names, keyboard access, contrast and form labelling need their own checks.
- Heading structure is one of many signals search engines use; fixing it helps them understand a page but does not by itself change rankings.
Privacy: where your data goes
The analysis runs in your browser. If you choose to load a public URL instead of pasting, a2z.tools fetches that address read-only and returns the text to your tab; private and internal addresses are refused and nothing is stored. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- WCAG 2.2 - checked 19 Sep 2026
- HTML Accessibility API Mappings - checked 19 Sep 2026
- WHATWG HTML - Headings and outlines
- W3C WAI - Page structure tutorial: headings and regions
- W3C - Understanding WCAG 2.2 Success Criterion 1.3.1 Info and Relationships
- W3C - Understanding WCAG 2.2 Success Criterion 3.1.1 Language of Page
Frequently asked questions
Is it wrong to skip heading levels?
It is not invalid HTML, but it makes the outline misleading. Someone navigating by headings who hears level 2 then level 4 will look for a missing level-3 section. WCAG 1.3.1 asks that structure shown visually is available in the markup, and consistent levels are the usual way to meet it. Style the heading smaller with CSS instead of choosing a lower level.
Can a page have more than one h1?
Yes, HTML permits it. The widely followed convention is one h1 naming the page, then h2s for its sections, because it gives the clearest heading list for screen reader users. The checker notes multiple h1s but does not treat them as an error.
What are HTML landmarks?
Landmarks are regions that assistive technology can list and jump to: banner (the page header), navigation, main, complementary (aside), contentinfo (the page footer), search, and any form or section that has an accessible name. Most come from the HTML elements themselves, so no ARIA is needed.
Why does it complain about two nav elements?
Two navigation landmarks are fine, but if neither has a name a screen reader announces both simply as navigation, and users cannot tell the main menu from the footer links. Add a short aria-label to each, such as Primary and Footer. Do not include the word navigation in the label; it is announced anyway.
Why does the lang attribute matter?
Screen readers pick the voice and pronunciation rules from it, and browsers use it for hyphenation, spell checking and translation prompts. Without it, an English page may be read with the listener's default language rules. WCAG 3.1.1 requires the page's main language to be set.
Does heading structure help SEO?
Search engine documentation describes headings as one way to help systems understand a page's topics, and clear structure makes it easier to pull out passages. It is one signal among many. This tool checks the structure; it does not predict rankings or AI citations.
Why is my bold text flagged as a possible heading?
A paragraph containing only a short bold phrase often acts as a visual heading. If it introduces the content that follows, make it a real heading so it appears in the outline. If it is only emphasis, leave it - the note is a prompt, not an error.
Last reviewed by the A2Z.Tools team against the sources listed above.
