Paste a page's HTML to see its heading outline as a tree and catch structure problems like a missing H1, skipped levels or empty headings.
Runs entirely in your browser. Nothing is uploaded to any server.
Many screen reader users jump between headings to skim a page, so a logical outline is essential.
Headings help search engines understand what a page and each section are about.
A consistent hierarchy makes long content easier for everyone to read.
Think of headings as a table of contents. The H1 names the page, H2s are the main sections, H3s are subsections of an H2, and so on. Going down more than one level at a time, for example from an H2 straight to an H4, breaks that outline and is flagged by accessibility checkers such as WCAG-based audits.
Going back up any number of levels is fine; a new H2 can follow an H4. Headings should never be chosen for their font size; use CSS for styling and pick the level based on structure. HTML5 allows several H1s technically, but a single H1 remains the clearest and most widely recommended approach.
A single H1 that matches the page title intent.
Step down one level at a time: H2 to H3, not H2 to H4.
Every heading needs visible text or meaningful image alt text.
It is valid HTML, but one H1 is clearer for users and assistive technology. The checker shows it as a warning, not an error.
No. The HTML is parsed with DOMParser, which does not execute scripts or load images.
Browsers block reading other sites directly, so paste the page source instead. In most browsers, press Ctrl+U or Cmd+Option+U to view it.
Yes. Headings are read from the markup, so headings hidden with CSS are still listed. Check that hidden headings are intentional.
Yes. Elements with role="heading" and aria-level are included at their declared level.
More free tools from My Panda Toolbox.