Heading Outline Checker

What it does

The Heading Outline Checker parses pasted HTML and renders every H1, H2, H3, H4, H5, and H6 as an indented tree showing the document’s structural hierarchy. It flags structural issues automatically: pages with no H1, pages with multiple H1s, headings that skip levels (H2 directly to H4), and empty heading tags. The output is the page’s heading skeleton at a glance, which is what screen readers and search engines use to navigate the page semantically.

Common situations

You are reviewing a page-builder template that produces well-styled visuals but suspect the heading structure underneath is wrong. Paste the rendered HTML, see the H1-H6 tree, identify mistakes. Usually H4s are being used because they look right visually rather than because the content sits four levels deep.

A blog post is failing accessibility checks for “heading hierarchy” without the audit tool explaining the specific issue. The outline checker shows the tree; the issues panel pinpoints exactly where the structure breaks (typically a skipped level or a missing H1).

You are auditing a competitor’s content structure to understand how they organise their pillar pages. The outline reveals their information architecture at a glance: depth of nesting, frequency of subheadings, where the H2s vs H3s land. Useful for understanding why their long-form content reads more navigable than yours.

A page-builder or theme has been updated and you suspect heading semantics have drifted. Paste the current page HTML, compare the outline against what you expected. Themes occasionally swap H1 templates for div-based headings during updates. The change is visually invisible but semantically catastrophic.

You are a content writer reviewing your own draft for structural readability before publishing. The outline shows whether the article has too few subheadings (a wall of H2-only content), too many levels of nesting (H4 territory should be rare), or imbalanced sections.

What you need to know

HTML headings (H1 through H6) define a document’s outline, its semantic table of contents. Screen readers use the heading structure to let users navigate by section without listening to every word. Search engines use it as a structural map of the page’s topics. Both expect the headings to follow a few simple rules.

One H1 per page. The H1 is the page’s title, its top-level identity. Most pages should have exactly one. Multiple H1s confuse the outline (which one is the page’s title?) and dilute keyword signals (Google has to guess which H1 represents the page). The HTML5 specification permits multiple H1s under sectioning elements (<article>, <section>), but in practice every major screen reader and search engine treats the first H1 as canonical and ignores subsequent ones. Single H1 is the safer default.

No skipped levels. An H2 should follow an H1, an H3 should follow an H2, an H4 should follow an H3. Skipping (H1 directly to H3, or H2 directly to H5) confuses both screen readers and search engines about how to nest the content. Skipped levels usually happen because someone chose H4 instead of H3 for visual reasons. The fix is CSS, not the heading level.

Headings should not be empty. An empty <h2></h2> exists in the DOM, contributes to the outline, and reads as “(empty)” to a screen reader. It happens when CMSes generate placeholder headings for layout purposes. Always populate or remove.

Headings are for structure, not decoration. A piece of large bold text styled to look like a section header should be an H2 if it introduces a section; it should not be an H2 if it is just a styled paragraph. Conversely, an H2 styled to look small and inline should still be an H2 if it actually introduces a section. Visual styling and semantic role are independent. Drive structure by content meaning, not visual presentation.

The most-debated rule is whether H2s are required between paragraphs of long content. The pragmatic answer: most readers benefit from a subheading roughly every 200-300 words of body content. Pages without enough subheadings look like a wall of text and rank slightly worse for being harder to scan. The outline checker doesn’t enforce this (it shows what’s there) but a thin outline on a long page is a signal worth acting on.

Frequently asked questions

Should I have only one H1 per page?

Yes, for compatibility with how screen readers and search engines interpret pages. HTML5 technically allows multiple H1s under sectioning elements but every major consumer of HTML treats the first H1 as the page’s title. Stick to one.

Can I skip heading levels for visual reasons?

No. Visual style is CSS. If you want a small heading that looks like an H4 but the content is at H3 nesting, write <h3> and style it with CSS to look smaller. Skipped semantic levels confuse the outline; visual differences should be CSS-only.

How many headings should a page have?

Depends on length. As a rough guideline, one heading per ~200 words of body content reads as well-structured. A 2000-word article with two H2s feels under-structured; one with twenty H2s feels over-fragmented. The right cadence is informed by the content, not a quota.

Does the H1 need to match the page title?

The H1 and the <title> tag often have the same content but they don’t have to. The <title> is what shows in the browser tab and SERP; the H1 is what shows on the page itself. Most pages benefit from making them identical or near-identical for clarity. Pages that differentiate (a punchy H1 alongside a longer SEO-friendly <title>) are doing it deliberately for SEO reasons.

What heading should logos use?

None. Site logos in the header should not be H1s. The page’s main heading (typically below the navigation, above the body content) should be the H1. Logos in the masthead are decorative; making them H1 gives every page on the site the same H1 (“Brand Name”) which is wrong.

Are headings inside <aside>, <nav>, or <footer> part of the outline?

Technically yes; they appear in the heading sequence. Screen readers usually announce them; search engines crawl them. In practice, headings outside the main content area (sidebars, footers, navigation) should be H2 or lower, and the main content should hold the H1. The outline checker shows them all in sequence regardless of which section they belong to.

Is heading order more important than heading count?

Yes. A page with five H2s and no H3s is fine if the content sections don’t need sub-sections. A page with five H2s and three H4s (skipping H3 entirely) is broken regardless of count.

Do display headings styled as H1 but tagged H2 hurt SEO?

If the visual H1 of the page is actually marked up as H2 (because someone wanted a different style), the page has no H1 and search engines will use the title or the highest heading found. This dilutes the keyword signal modestly. The fix is to mark up the page’s main heading as H1 and use CSS for any visual difference.

Common problems

Problem: Multiple H1s appear on the page but the outline checker only flags one.

The checker flags the count and warns about multi-H1s. If you see only one warning, that’s because the warning is summary-level: the message says “3 H1 tags” rather than highlighting each individually. Find them by searching the HTML for <h1.

Problem: Heading structure looks fine in the outline but accessibility scanners still flag issues.

Scanners look at things beyond pure outline structure: heading levels relative to landmarks, headings inside lists or other unexpected contexts, ARIA-overridden roles. The outline checker covers the basic hierarchy; accessibility scanners cover the broader rule set.

Problem: A page-builder is producing H2s that are styled to look like H4s.

The visual hierarchy doesn’t match the semantic hierarchy. The fix is in the page-builder configuration. Most allow setting both the heading level and the visual style independently; if the builder doesn’t support that, custom CSS overriding the H2 visual style is the workaround.

Problem: Page has a clean visual hierarchy but the outline shows nothing.

Headings are likely styled <div> or <p> elements with class names suggesting they should be H1/H2/etc. Visual styling does not create semantic structure. Search and replace divs styled as headings with proper heading tags.

Problem: Outline shows correct structure but the page ranks badly for the H1’s keyword.

The H1 is one of many ranking signals. Clean structure helps but does not override poor content quality, weak inbound links, or off-topic content. Heading hierarchy is necessary for semantic clarity but not sufficient for ranking.

Tips

• One H1 per page, every page, no exceptions. The semantic clarity is worth more than the flexibility multiple H1s offer.
• Headings should communicate the topic of the section they introduce. “Continue Reading” is a bad heading; “Why structure matters more than density” is a good one.
• Use CSS for visual differences. Pick the heading level by content meaning; pick the styling separately.
• A long page with only H2s is under-structured. A page with H4s and H5s is over-structured for most content. H2 and H3 do most of the work.
• The outline is what a screen-reader user navigates by. Read it as a table of contents: does it make sense without seeing the page?

Related tools in this suite

The Page SEO Audit reports the heading count and structure as part of its overall assessment. The Alt Text Audit covers another major accessibility concern (image alt text) that rounds out the structural-accessibility check. Both tools are part of the SEO Suite.

What this looks like at scale

For a single page, the outline checker is fine. For a site with hundreds of pages, headings should be templated correctly and audits should run as part of a broader accessibility check. The WP Beacon Plugin audits heading hierarchy across every page on every visit and flags pages with missing H1s, multiple H1s, or skipped levels.

Take it further

If a content set has widespread heading hierarchy issues across templates, the fix is in the templates and the editorial workflow, not in fixing pages individually. Talk through the audit and it usually surfaces alongside other accessibility issues that benefit from a structured remediation.