Brand Extractors·4 min read

Document Outlines Explained: The H1 to H6 Heading Tree

Strip the paragraphs, images, and styling from any web page and what remains is its outline: one H1 naming the page, H2s marking the major sections, H3s subdividing them. Document outlines explained simply means reading that hierarchy the way you'd read a book's table of contents. The Headings Tree draws it for any URL, indented and color-coded. This article shows how to read a heading tree, what broken outlines look like, and how writers can plan with headings before drafting a word.

Open the tool All insights

The heading tree is a page's table of contents

Structure you can read in seconds.

Headings aren't big text, they're nested containers. An H2 opens a section that runs until the next H2; every H3 inside belongs to it. Rendered as an indented tree, a page's headings read exactly like the contents page of a book, and a 4,000-word article compresses into fifteen scannable lines.

That compression is the point. You can judge whether a page covers a topic thoroughly, superficially, or chaotically without reading a single paragraph, which is why editors and content strategists lean on outlines before prose.

Document outlines explained, level by level

What each heading rank is for.

The H1 states what the page is; there should be one, and everything else on the page lives underneath it. H2s carve the content into its major movements, and a reader should grasp the page's full argument from the H2s alone. H3s handle the supporting detail inside each movement.

H4 through H6 exist for genuinely deep material, dense documentation and legal texts, and most pages never need them. Depth for its own sake reads as clutter: an outline that needs H5 for a blog post is usually a page trying to be three pages.

A worked heading tree example

One article, mapped.

Run a baking tutorial through the Headings Tree and the outline comes back: H1 Sourdough for Beginners, then H2 Equipment, H2 Building your starter with H3 Feeding schedule and H3 When it's ready, then H2 Baking day with H3 Shaping, H3 Scoring, and H3 Oven temperatures. The count chips read H1: 1, H2: 3, H3: 5.

The shape says this page is well planned: three balanced movements, detail concentrated where beginners struggle, no stray levels. Compare that against a competitor whose tree shows one H1 and eleven flat H2s, and you know which page respects its reader before you've read either.

Skipped heading levels and other outline breaks

Where trees go wrong.

Skipped heading levels are the most common break: an H2 followed directly by an H4 leaves a hole in the hierarchy where an H3 should be. In the tree it shows as an indentation jump, and for screen reader users navigating by heading level it means a rank they expected simply is not there.

Two more patterns to watch. Multiple H1s give the document two titles, which is why the tool flags any count above one. And a completely flat page, one H1 followed by twenty same-level headings, technically validates while communicating no grouping at all, a list pretending to be a structure.

Headings as a content map for writers

Outline first, paragraphs second.

Treating headings as a content map inverts the usual drafting order. Write the H1 and H2s before any body copy and you've forced the argument into the open: if the H2 sequence doesn't tell a complete story on its own, more paragraphs won't rescue it.

The same map works for competitive briefs. Pull the heading tree from the three pages ranking above yours and you have their content plans laid bare, which subtopics they cover, in what order, at what depth. Your outline can then cover the gaps they left instead of echoing their structure.

Mistakes that flatten a heading tree

Most broken outlines come from writing tools and habits, not intent.

Making text bold and large instead of using a real heading tag; the visual hierarchy exists but the document outline records nothing.
Choosing heading levels for their font size, an H4 picked because it looked right, breaking the nesting logic.
Letting the CMS template emit its own H1 on top of the one in your content, the classic double-H1 source.
Using headings as decoration, a lone Welcome! in an H2, which adds a section containing no content.

Two habits for outlining with the heading tree

Before publishing anything long, extract your own draft's headings and read only them, top to bottom. If the sequence reads like a coherent summary, the structure holds; if it reads like a word cloud, restructure before polishing sentences.

Second, budget roughly one H2 per major idea and keep sections between 150 and 400 words. Shorter than that and the heading was decoration; longer and the section is hiding an H3 or a second H2 inside it.

Headings Tree vs Page Headings Extractor and friends

Same tags, different questions.

The Headings Tree and the Page Headings Extractor read identical markup for different audiences. This tool renders the outline as a visual document map, built for writers, editors, and anyone judging content structure. The Page Headings Extractor approaches the same tags as an SEO audit, checking heading usage as a ranking hygiene factor. Use whichever matches your question, and when the structural thinking moves from one page to the whole site, the Sitemap Visualizer draws the equivalent tree at site scale.

Try it now

Open Headings Tree

The tool is one click away. No sign up, no upload, no payment.

Open Headings Tree

Write a review