HTML structure for SEO: the outline test every page should pass

Every page, no matter how it looks, is first a document. Your design might bend that document into a grid, a dashboard or a card wall, but underneath it, the HTML still tells a story about what comes first, what belongs to what, and what the whole thing is called. Search engines read that story before anything else. Get the story straight and ranking becomes the easy part of the work.

What a crawler sees before a single word

Strip the styling from any page and a crawler sees a tree: the html at the root, the headings in order, and the regions — header, nav, main, aside, footer — as labeled branches. This is the page's outline, and it's the only part of a page Google reads top to bottom before deciding what the rest of it means. Here's what a healthy outline looks like when an analyzer dumps it to the console:

OUTLINE CHECK — /html-structure-for-seo
h1         HTML structure for SEO                   1 found   OK
h2         What a crawler sees first                4 total   balanced
h3         The four rules of heading order
h3         Landmarks vs div soup
h2         Five-minute restructure plan
h2         A template you can rebuild from
main       single main element                       1 found   OK
nav        exactly one                               1 found   OK

Shortcut for you: open any page in FastCompiler's HTML runner, paste the body markup in, and step through it in the preview panel with the browser's element inspector. You're looking for the same thing that analyzer shows — one main, sensible heading order, no unexplained containers.

The four rules of heading order

If the whole article shrinks to one rule, it's this: the outline has to read like a table of contents, not like a page of underlined words. The table below shows the standard roles each level plays.

Level	Job on the page	How many	Example
h1	The page's single headline; echoes the title tag in friendlier words	One, exactly	<h1>HTML structure for SEO</h1>
h2	Major sections; each one covers one complete idea	4–7 for a long read	<h2>Landmarks vs div soup</h2>
h3	Sub-topics inside an h2	Only where h2s need splitting	<h3>The viewport caveat</h3>
h4	Rare; fine print within an h3	Sparingly	<h4>Example output</h4>

The three verdicts you'll meet when you test your own pages:

Ask one question about every heading on your page: does the text under it keep the promise it makes? If yes, keep it. If no, either cut the heading or merge it into the section above. Most pages carry two or three promises that were never meant to be kept.

Landmarks vs div soup

Headings name the chapters; landmarks name the regions. A page built entirely from <div> containers makes a crawler guess where the navigation ends and the content begins — and div soup gets worse as pages age, because every new feature adds another unlabeled wrapper. The migration is embarrassingly simple:

Same page, same pixels, same loading cost — but the second version has a map, and the map is exactly what a crawler, a screen reader and a voice assistant all ask for. The roles in play on a typical page:

• header — the page's top region; typically once, containing the logo and nav.
• nav — link groups; once per navigation region, however many you need.
• main — the unique content of the page; exactly once, and never nested inside other regions.
• article — a self-contained unit: a post, an FAQ entry, a product.
• section — a themed group with its own heading.
• aside — complementary content: sidebars, notes, tangents.
• footer — bottom region: legal text, contact links.

Restructure a page in five minutes

No designer, no plugin, no content rewrite — fixing structure is purely markup surgery. The plan works on pages that already rank poorly and on pages you're about to publish.

1. Dump the outline. Paste the page's body markup into the FastCompiler HTML code runner and read it from top to bottom, marking each heading level as you go.
2. Count the h1s. Anything other than one is the first failure. Keep the most descriptive heading as the h1 and re-level the extras.
3. Reladder the headings. Walk the list and insert missing levels — an h3 becomes an h2, an orphan h3 moves under the nearest h2 above it.
4. Rename the wrappers. Every div that acts as a region gets a landmark: menus to nav, the unique content to main, side rails to aside.
5. Re-run the dump. The outline should now read chapter by chapter. Re-test in FastCompiler, hit run, and confirm the preview looks identical — it will, because structure never changed the design.

A template you can rebuild from

Here's the outline pattern this site uses for every blog post, compressed to a reusable skeleton. It's deliberately the smallest thing that passes the outline test — paste it into the HTML code runner and inspect it in the preview before you build anything bigger on top.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to Fix Heading Order | Brand</title>
</head>
<body>
  <header>
    <nav><a href="/">Home</a><nav>
  </header>
  <main>
    <article>
      <h1>How to Fix Heading Order</h1>
      <p>Standfirst: what this article fixes.</p>
      <section>
        <h2>Step one: dump the outline</h2>
        <p>Body copy.</p>
      </section>
      <section>
        <h2>Step two: reladder</h2>
        <p>Body copy.</p>
        <h3>When to use an h3</h3>
        <p>Detail.</p>
      </section>
    </article>
  </main>
  <aside>
    <p>Related reading.</p>
  </aside>
  <footer>
    <p>© 2026 Brand</p>
  </footer>
</body>
</html>

You'll know the restructure worked when the outline test reads clean top to bottom and nothing on screen changed. Structure is the rare SEO task with a definite finish line.

Frequently asked questions

How many h1 tags should a page have?

Exactly one. A second h1 doesn't add a second headline — it adds a second, competing answer to "what is this page about." If you find two h1s, keep the more descriptive one and demote the other to an h2.

Does heading level order matter for SEO?

It matters because search engines build the page outline from your heading hierarchy, and skipped levels leave holes in that outline. An h1 that jumps straight to an h3 costs the h2's worth of context — the content in between loses its place in the story.

What is div soup and why does it hurt SEO?

Div soup is a page built mainly from generic div containers with no landmarks to name them. Crawlers and screen readers then have to guess where the navigation ends and the content begins. Replacing the wrappers with main, nav, aside and friends removes the guesswork — that's the whole fix.

Do semantic HTML elements slow down my page?

No. header, main, article and footer render exactly like div — same cost, same speed, same pixels. A semantic page and a div soup page load identically; only the structure they expose is different.

Once the outline is in order, make sure the text inside it pulls its weight too: the SEO-friendly HTML tags guide covers title tags and meta descriptions, browse the full HTML tags reference, and if you're publishing soon, test your meta tags and Open Graph tags before you publish so the search result card looks as organized as the page behind it. Try every example live in the free HTML compiler or browse all developer tools.