HTML Outliner — Heading & Document Structure Checker
Paste HTML, upload a file or fetch a URL to see its heading outline and landmark structure, with a list of problems that hurt SEO and screen-reader navigation.
Runs in your browser — nothing is uploaded Free, no limits
Source
Paste some HTML, open a file or fetch a URL to see its heading outline, landmark structure and a list of problems to fix.
Want to see what it looks like first? The sample is a small page with common mistakes: two h1s, a skipped level, an empty heading, unnamed sections and two navs.
How to use the HTML Outliner
- Paste your HTML, open a .html file, or switch to Fetch a URL and enter a page address.
- Read the outline in the Headings view, or switch to Structure to see headings nested inside landmarks such as header, nav, main and footer.
- Work through the issues list: each item says what is wrong, where, and how to fix it.
- Copy or download the outline as plain text, Markdown or JSON.
Frequently asked questions
Is one h1 per page required?
No. HTML allows more than one h1, and Google has said multiple h1s are not a ranking problem. One h1 that names the page is still the clearest choice for screen-reader users and for anyone skimming the outline, so this tool flags several h1s as a warning rather than an error.
Why does skipping heading levels matter?
Screen-reader users often jump between headings or list them by level. Going from h2 straight to h4 suggests a missing section and makes the structure harder to follow. Pick the level by meaning and use CSS to control how big it looks.
What happened to the HTML5 document outline algorithm?
It was meant to let sectioning elements (section, article, nav, aside) reset heading levels, but no browser or screen reader ever implemented it, and it was removed from the HTML specification. Real tools only look at the h1–h6 levels, which is why this tool checks the heading hierarchy and shows sectioning elements only as landmarks.
What are landmarks, and why does the tool list them?
Landmarks such as banner (header), navigation, main, complementary (aside) and contentinfo (footer) let assistive-technology users jump between big regions of a page. A section or form only becomes a landmark when it has an accessible name, and pages with several navs should label each one.
Does Google need an h1 to rank a page?
No. Google uses headings as a hint about the page's structure and topic, but it does not require an h1, and pages rank without one. A clear h1 and logical subheadings still help users and search engines understand the content.
Can it check pages that are built with JavaScript?
Only partly. When you fetch a URL we read the HTML the server sends, not the page after scripts have run, so headings added by JavaScript will not appear. To check a rendered page, copy the DOM from your browser's dev tools and paste it in. Fetching goes through our server; pasted HTML and uploaded files never leave your browser.