Tooltrusty

Header Tag Structure Analyzer

Your headings are the page's table of contents. This shows the outline they actually produce.

View the page source in your browser (Ctrl+U or ⌘+U) and paste the whole thing. Nothing is uploaded.

0Headings
0H1 count
0Skipped levels
—Structure

Outline

Findings

    Level counts

    LevelCountNotes

    Runs in your browser. The HTML you paste is parsed in this tab with the browser's own DOMParser, which builds an inert document — scripts in your markup never run and nothing is requested from the pages it references. That means you can safely audit a staging site, a client page behind a login, or an unpublished draft.

    What the header Tag Structure Analyzer does

    Headings do two jobs at once. Visually they break a page into scannable chunks. Structurally they form an outline that screen readers use for navigation and that search engines read to understand how a page is organised. The second job is invisible, which is why heading structure so often drifts into nonsense while the page still looks fine.

    This analyser extracts every H1 to H6 in document order and draws the outline they produce, with each level indented. Seeing it laid out makes problems obvious that are invisible in the rendered page: an H4 used because it happened to be the right size, a section heading that is actually an H3 inside nothing, or a page whose first heading is an H2 because the H1 is hidden in a template.

    The checks cover the faults that matter. No H1 leaves the page's subject unstated. Multiple H1s are permitted by HTML5 and tolerated by Google, but they blur what the page is primarily about. Skipped levels — an H2 followed by an H4 — break the outline for anyone navigating by heading level, which is how many screen-reader users move through a page. Empty headings, usually produced by a heading wrapped around an image or an icon, are announced as nothing at all.

    The rule to hold onto is simple: choose a heading level by where it sits in the document's structure, never by how big you want the text to look. Size is a job for CSS.

    How to use it

    1. Paste your page's HTML source into the box.
    2. Read the outline. It should look like a sensible table of contents with one H1 at the top.
    3. Fix anything red first — a missing H1 or an empty heading.
    4. Then close any skipped levels, usually by promoting the heading rather than adding a filler one.

    A worked example

    A typical broken outline, and what it should be:

    Before                         After
H1 Best running shoes          H1 Best running shoes
   H2 How we tested               H2 How we tested
         H4 Scoring                  H3 Scoring
   H2 The five shoes              H2 The five shoes
         H4 Shoe one                 H3 Shoe one
         H4 Shoe two                 H3 Shoe two

    The H4s were chosen because the designer wanted smaller text than an H3 gave. The outline that produced is one where every subsection appears to be nested two levels deep inside nothing. Promoting them to H3 and setting the font size in CSS fixes the structure without changing the page's appearance by a pixel.

    Frequently asked questions

    Can a page have more than one H1?

    HTML5 permits it inside sectioning elements, and Google has said multiple H1s will not hurt you. But one H1 states the page's subject unambiguously to every consumer of the page, and there is no benefit to having several. Use one.

    Do skipped heading levels hurt SEO?

    Only marginally, and indirectly. The bigger cost is accessibility: screen-reader users navigate by heading level, and a jump from H2 to H4 implies a missing section. Search engines tolerate it; readers using assistive technology are the ones who suffer.

    Should headings contain my keywords?

    Where it is natural. An H2 covering the topic is a genuine signal of depth. Putting the keyword into every heading reads as manipulation and makes the outline useless as a table of contents, which is what it is for.

    Does the visual size of a heading matter?

    Not to a crawler — it reads the tag, not the CSS. Pick the level by structural position and set the size in your stylesheet. Choosing H4 because you wanted smaller text is the single most common cause of a broken outline.