format_list_numbered On-Page & Content

Heading Outline Extractor

Pull the H1 to H6 structure out of any page and spot outline problems.

Paste a page's HTML and see its headings laid out like a table of contents. The tool flags a missing or repeated main heading (H1), skipped levels, empty headings, and duplicates. Copy the outline for briefs or audits.

build_circle Try the free tool
list On this page expand_more
star

Key takeaways

  • check_circle Headings form the skeleton of a page, and readers, screen readers, and search systems all use them to navigate and understand it.
  • check_circle Use one clear H1 that states the topic, and keep it short enough to scan.
  • check_circle Step down one level at a time. Skipped levels break the logical hierarchy.
  • check_circle Empty and duplicate headings are common template errors that are easy to find with an outline view.
  • check_circle Multiple H1s are not a penalty by themselves, but a single H1 is clearer for people and assistive technology.
  • check_circle Write H2s as the questions and topics your audience searches for so the outline works as a summary of the page.
  • check_circle Extracted outlines are useful research for briefs, but should inform original content, never be copied.
format_list_numbered

What is Heading Outline Extractor?

A heading outline extractor pulls the heading tags out of a page and shows them as a structured list. You paste HTML, and the tool returns every H1 through H6 in document order, indented by level, with the count of headings, the count of H1s, and the number of issues found. A copy button exports the outline as an indented text list you can drop into a brief, audit, or spreadsheet.

HTML gives you six heading levels to express hierarchy. The H1 names the page, H2s mark the main sections, and lower levels divide those sections further. Browsers do not enforce the hierarchy, so pages often drift: a template skips from H2 to H4 because the H3 style looks wrong, a page builder leaves empty heading tags, or two sections share the same generic title. These errors are hard to see on the visual page because CSS controls how headings look, which is why an outline view is useful. It shows structure without styling.

The tool runs entirely in your browser using the built-in HTML parser, so pasted scripts never execute and nothing is uploaded. It checks for a missing H1, multiple H1s, an H1 over 70 characters, empty headings, skipped levels, and duplicate text. It does not judge keyword choice or content quality, and it needs rendered HTML rather than a JavaScript template. Use it to audit templates, review drafts, check accessibility structure, and study how competing pages organize a topic before you write your own.

insights

Why heading structure matters

A heading outline is the fastest way to judge whether a page is organized. Visitors skim headings to decide whether to stay, screen reader users jump between them to move around a page, and search and AI systems use them to identify topics and extract answers. Fixing structure is cheap and improves all three.

arrow_forward Clear headings help readers find the answer they came for quickly.
arrow_forward Logical levels let screen reader users navigate by heading instead of reading everything.
arrow_forward Question-style H2s make it easier for search features to pull concise answers.
arrow_forward Template-level fixes correct structure across many pages at once.
play_circle

How to use this tool

  1. 1

    Paste page HTML

    Open View source on the page (or copy the rendered HTML from your browser's inspector), then paste it in.

  2. 2

    Read the outline

    See every heading indented by level with a count of issues.

  3. 3

    Fix and copy

    Repair structure problems, or copy the outline into a brief or competitor comparison.

fact_check

What this tool checks

verified

Full H1 to H6 outline

Parses the pasted HTML and lists every h1 through h6 in document order, indented by level, with the text of each heading and a total heading count.

verified

Missing or multiple H1

Flags a page with no H1, and a page with more than one H1. It also tells you how many H1 tags were found so you can locate the extras.

verified

Long H1 warning

Any H1 longer than 70 characters is flagged, including when several H1s are present, since long primary headings are harder to scan and reuse.

verified

Skipped heading levels

Reports each place where the outline jumps down by more than one level, such as an H2 followed directly by an H4, and names the heading where it happens.

verified

Empty headings

Detects heading tags with no visible text, which page builders and templates often leave behind, They show as empty in the outline and count as issues.

verified

Duplicate headings

Compares heading text without regard to case and reports repeats, so repeated section titles such as Overview or Details are easy to spot and rewrite.

engineering

Technical guide

Signals, standards, and what to fix when checks fail.

code

How heading levels create structure

HTML defines six heading levels, h1 to h6. Together they form a hierarchy: the H1 names the page topic, H2s divide it into major sections, and H3s break those sections into parts. Browsers, screen readers, and search engines read that hierarchy to understand what a page covers. The tag itself says nothing about size, which you control with CSS. A well-built outline should read like a table of contents, where the sequence of headings alone tells you what the page teaches. The tool prints exactly that sequence so you can judge whether it does, without visual styling getting in the way.
code

What the extractor parses

The tool uses your browser's HTML parser to read the pasted markup as inert data, so scripts, styles, and embedded content never run. It selects every h1 to h6 element, collapses whitespace in the text, and records the level. It needs rendered HTML: if you copy the source of a JavaScript app before it renders, the headings may not exist yet, and the tool will report none found. Use your browser's inspect tool to copy the rendered markup in that case. Any snippet works, including a single template or a section of a page, and the text inside nested tags such as links or spans is included.
code

Heading rules that matter and rules that do not

Empty headings and skipped levels make navigation harder for screen reader users, who jump between headings and expect a logical structure. A single, clear H1 is the widely recommended convention. Google has said that multiple H1s are not a ranking problem in themselves, so treat the multiple H1 warning as a structure and clarity check, not a penalty warning. The tool flags a long H1 above 70 characters as a readability suggestion, not a hard rule. It also does not verify keyword usage, and it counts headings inside hidden containers like any other.
code

Using outlines for content planning

Extracting a competitor or top-ranking outline is a fast way to see what topics a page covers and in what order. The tool copies the outline as a plain indented list, with each line labeled H1 to H6, which pastes cleanly into a document, spreadsheet, or content brief. Compare several outlines to find sections that every result includes and gaps none of them fill. Use them as research, not templates: the goal is to cover the same questions better, with original examples and accurate detail, instead of copying someone else's structure heading for heading.
school

Deep dive

rule

Auditing a page outline step by step

Start with the H1. Confirm there is one, that it names the topic, and that it matches the search intent of the page and its title tag. Then read the H2s only. They should form a logical summary: if someone read only those lines, they should grasp what the page offers and in what order. Next check each H2's H3s for parallel wording and sensible grouping. Look for levels that skip, headings that repeat, and empty tags. Finally compare the outline to the visible page, since a heading that describes a section poorly will confuse readers even if the structure is technically valid. Repeat the audit for each page template, then spot check individual pages.

Read H2s as a summary

Strip the outline down to H1 and H2 and read it aloud. If the story is unclear or repetitive, the page structure needs rework before any wording changes.

Check parallel wording

Sibling headings should share a pattern, such as all questions or all noun phrases. Consistent wording makes the outline easier to scan and compare. Rewrite outliers to match the pattern.

Audit templates first

An error in a template repeats on every page that uses it. Fix product, category, and article templates before individual pages. Sample a few pages afterward to confirm the fix spread across the site.

menu_book

Headings and accessibility

Screen reader users often navigate by headings, jumping from one to the next or listing all of them to get an overview. That makes heading structure one of the most practical accessibility features on a page. The Web Content Accessibility Guidelines expect headings to describe topic or purpose and expect structure to be conveyed programmatically, which means real heading tags rather than bold text styled to look like headings. Skipped levels and empty headings force these users to guess at the page layout. When you fix structure for accessibility you usually improve the page for everyone. Pair the extractor with a full accessibility review, since headings are only one part of building an accessible page. Also test with real assistive technology when possible.

Real tags, not styled text

Bold or enlarged paragraphs look like headings but are invisible to heading navigation. Use actual heading elements and style them with CSS.

Meaningful heading text

Headings such as Click here or More do not describe the section. Use text that makes sense out of context, since users often hear headings as a list. Rewrite vague labels to be specific.

Consistent structure across pages

Predictable structure on similar pages lets returning users build habits. Keep template headings consistent unless the content genuinely differs.

edit_note

Using outlines to plan better content

Outlines from ranking pages show which topics searchers expect to see. Extract several, list the recurring sections, and note which questions appear in every one. That is your baseline. Then look for what none of them do well: a missing comparison, an outdated figure, a local angle for UK, Australian, or Singapore readers, or a practical worked example. Build your own outline that covers the baseline and adds original value from your expertise. Write H2s as questions or topics people search for, and put the direct answer immediately under each heading in a sentence or two, so the passage can stand alone. Use the copy button to paste outlines into a brief for writers, and compare revisions as the draft develops. Never copy another site's wording or structure wholesale.

Find the baseline

Sections repeated across most top pages signal expected topics. Cover them, but treat them as the minimum, not the plan. Use the extractor on several results to see which sections keep repeating.

Find the gaps

Look for questions the outlines skip, such as costs, timelines, mistakes, and local rules. Gaps are where an original page can offer more than existing results. Note them for your brief.

Answer under the heading

Put a direct, self-contained answer right after each question heading. It serves skimmers and gives search features a clean passage to use. Keep it to one or two sentences.

build

Fixing headings in templates and page builders

Most heading problems are not written by hand: they come from themes, widgets, and page builders. A theme may wrap the site name in an H1 on every page, a sidebar widget may use H2 for its titles, and a builder may produce empty headings when a dynamic field has no value. Extract the outline of a representative page of each type and trace each unexpected heading back to its source. Fix the template or widget setting rather than the individual page. Many builders let you choose the tag for each heading element separately from its style, which lets you keep the design and correct the semantics. Retest after each change, and recheck after theme or plugin updates, since updates can reintroduce old markup.

Site name as H1

If the logo or site name is an H1 on every page, the page title gets pushed down. Change it to a div or paragraph and keep the page title as the only H1.

Widget and footer headings

Sidebars and footers often use H2 or H3 for labels that are not content sections. Switch them to non-heading elements to keep the main outline clean.

Dynamic empty fields

Builders may output a heading tag even when a field is blank. Add conditions so the tag is not printed when there is no text. Test with an empty field.

compare

Examples

thumb_up Strong examples

Clean hierarchy

H1: Boiler Repair in Leeds > H2: Common Boiler Faults > H3: No Hot Water > H3: Pressure Loss

One H1, then sections and subsections, each stepping down a single level. The outline alone tells a reader what the page covers.

Question-style H2

<h2>How much does a roof inspection cost?</h2>

It mirrors a real search question, tells the reader what the section answers, and gives search features a clear label for the passage below. Answer the question in the first sentence below.

Specific sibling headings

<h2>Delivery details</h2> ... <h2>Warranty details</h2>

Each heading is unique and descriptive, so the outline stays useful and readers can tell the sections apart without reading the content.

thumb_down Weak examples

Skipped level

<h2>Services</h2> then <h4>Pricing</h4>

The jump from H2 to H4 leaves a gap in the hierarchy. Screen reader users may assume content is missing, and the structure no longer reads logically.

Empty heading

<h3></h3>

An empty tag creates a heading stop with nothing to read. It is usually a leftover from a page builder block and should be removed.

Heading used for size

<h1>Call us today!</h1> as a banner, next to the real H1

The tag is chosen for its look, not its meaning. It creates a second H1 and muddies the page topic. Use CSS classes for styling instead.

rule

Best practices and common mistakes

check_circle Best practices

  • done Write one H1 that states the page topic in plain words, ideally under 70 characters.
  • done Move down one level at a time: an H2 leads to an H3, and an H3 leads to an H4, never a jump from H2 to H4.
  • done Write H2s as the topics or questions your audience actually searches for, so the outline works as a summary.
  • done Give each heading unique, descriptive text so a reader or screen reader user can tell sections apart from the list alone.
  • done Delete empty heading tags left behind by page builders and style headings with CSS instead of choosing tags for size.
  • done Extract and review the outline of every key page template, since one template error repeats across hundreds of pages.

cancel Common mistakes

  • close Using heading tags on text only to make it bigger or bolder, such as sidebar labels or pull quotes.
  • close Repeating generic headings such as Overview, Details, or More Information across sections of one page.
  • close Leaving empty h2 or h3 tags in templates, widgets, and page builder blocks.
  • close Stuffing headings with keyword lists instead of writing clear, natural phrases.
  • close Skipping from an H2 straight to an H4 because the H3 style looks the wrong size.
lightbulb

Common use cases

task_alt

Auditing a page template for heading structure problems before it is applied across a whole site.

task_alt

Extracting a competitor's outline to plan a content brief or find topic gaps.

task_alt

Checking a draft article for a clear hierarchy before it is published.

task_alt

Reviewing accessibility issues that affect screen reader navigation on a landing page.

task_alt

Comparing the structure of a page before and after a redesign or content refresh.

groups

Who should use this

person SEO managers and technical SEOs person Content strategists and editors person Writers preparing drafts person Accessibility reviewers person Web developers and designers
dictionary

Glossary

Heading
An HTML element from h1 to h6 that labels a section of content, with lower numbers indicating higher importance in the page hierarchy.
H1
The top-level heading of a page, normally one per page, that states its main topic in plain words.
Document outline
The nested structure created by a page's headings, similar to a table of contents, which shows how sections relate to one another.
Skipped level
A jump in heading levels of more than one step, such as H2 directly to H4, which breaks the logical hierarchy of the outline.
Screen reader
Assistive software that reads page content aloud. Many users jump between headings to navigate, so heading structure directly affects usability.
Rendered HTML
The markup of a page after the browser has run its JavaScript, as opposed to the raw source delivered by the server.
Featured snippet
A highlighted answer shown at the top of some search results, often drawn from a section whose heading matches the query.
Semantic HTML
Markup that uses elements for their meaning, such as headings for section titles, so that software can interpret the structure correctly.
quiz

Frequently asked questions

Ready for a deeper audit?

HeyLead reviews your site, competitors, and growth opportunities with no sales pressure.

Get a Free Audit arrow_forward