HTML Outliner — Heading & Document Structure Checker

Paste HTML, upload a file or fetch a URL to see its heading outline with the text under every heading, word counts and landmark structure, plus a list of problems that hurt SEO and screen-reader navigation.

  • PrivateYour content never leaves this device
  • No uploadsProcessed in your browser, not on a server
  • 100% freeNo signup, no watermark, no trial
  • UnlimitedUse it as often as you like, no daily caps

How we protect your privacy →

Source

Nothing leaves your browser. The outline updates as you type.

Paste some HTML, open a file or fetch a URL to see its heading outline with the text under each heading, its 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

  1. Paste your HTML, open a .html file, or switch to Fetch a URL and enter a page address.
  2. Read the outline in the Headings view: each heading shows the start of its text and how many paragraphs and words it has. Press Show all text to read the whole section, or turn off Show text for headings only.
  3. Switch to Structure to see headings nested inside landmarks such as header, nav, main and footer.
  4. Work through the issues list: each item says what is wrong, where, and how to fix it.
  5. Copy or download the outline as plain text, Markdown or JSON. With Show text on, the Markdown export is a full content outline: headings plus the text under each one.

Frequently asked questions

Does it show the text under each heading?

Yes. Every heading shows the opening of its section with the number of paragraphs and words, and Show all text lists every paragraph, list item and image alt text. Menus, the header, the footer and buttons are left out, so you see the page's real content. The summary adds total words, paragraphs and reading time.

What content problems does it flag?

Headings with no text in their section, main (H1/H2) sections under 40 words, more than 300 words without a subheading, and pages with very little text overall. These help readers scan the page and give search engines enough context.

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.