Heading Structure: H1 to H6 Done Right
Headings are your page’s skeleton. Readers use them to scan, Google uses them to understand your content’s structure, and AI systems lift answers from the text sitting directly under them. Get the skeleton right and everything you write becomes easier to rank — and easier to cite.
HTML gives you six heading levels, H1 through H6. They are not font sizes — they are a hierarchy of meaning: the H1 states what the whole page is about, H2s divide it into major sections, H3s divide those sections, and so on. Think of it as the index of a book, embedded in the page itself.
Here’s the structure of a well-built page — in fact, it’s roughly the structure of the lesson you’re reading:
Read just the headings — you understand the entire page without reading a paragraph. That’s the test of good structure, and it’s exactly how both scanning humans and parsing machines consume your page.
The Rules of Heading Hierarchy
1. One H1 per page — and it matches your title’s promise
The H1 is the on-page headline: the first thing a visitor reads after clicking. Use exactly one. Multiple H1s don’t break Google, but they blur the page’s focus and usually indicate a theme problem (more below). As you learned in Lesson 3.1, the H1 and title tag can be worded differently — title optimised for the SERP, H1 for the reader — but they must make the same promise, with the primary keyword present in both.
2. Never skip levels downward
H1 → H2 → H3, in order. Jumping from H1 straight to H4 (usually because “H4 looked the right size”) breaks the outline logic. If the visual size is wrong, fix it with CSS or your theme settings — never by choosing a different heading level. Levels are meaning; size is styling.
3. Headings describe the content below them
Each heading is a label for its section — specific enough that someone scanning could jump directly to what they need. “More Information” and “Details” are wasted headings; “Photo Cake Prices in Pune” earns its place. And because Google’s language systems read headings as strong topical statements, descriptive headings are also where your supporting keywords from the cluster (Lesson 2.3) naturally live.
4. Don’t use headings for decoration
The reverse mistake: making random text a heading because you want it big and bold (“Call Now!!” as an H2). If it doesn’t label a content section, it’s not a heading — style it with bold text or CSS instead. Every fake heading dilutes the real outline.
Headings That Win Snippets and AI Citations
Here’s where heading craft pays modern dividends. Recall from Lesson 1.4 how featured snippets, People Also Ask answers, and AI Overview citations are chosen: Google finds a question clearly stated, with a direct answer immediately below it. Headings are exactly where that pattern lives.
The technique — call it question heading + first-sentence answer:
- Phrase the heading the way people search, taken straight from your PAA harvesting (Lesson 2.2): “How many days in advance should you order a customised cake?”
- Answer completely in the first sentence below it: “Order a customised cake at least 3–4 days in advance; complex theme cakes need 5–7 days.”
- Then elaborate for the humans who want detail.
That heading-plus-answer unit is liftable: featured snippets quote it, PAA boxes use it, and — as you saw with query fan-out in Lesson 2.4 — AI systems retrieving sub-answers cite exactly this shape of content. One writing habit, four visibility surfaces.
The WordPress Heading Traps
WordPress users inherit heading problems from themes and habits. The common ones:
| Trap | The problem | Fix |
|---|---|---|
| ✗ Site name or logo as H1 on every page | Every page’s “topic” becomes your brand name; the real topic demotes to H2. | Check your theme: view source and search for <h1. The page title should be the H1 — many themes have a setting; otherwise it’s a child-theme fix. |
| ✗ Widget/sidebar titles as H2–H4 | “Recent Posts” and “Categories” enter your content outline on every page. | Good themes use styled div/span for widgets. If yours doesn’t, this alone justifies a theme change. |
| ✗ Choosing heading level by size in the editor | The classic H1 → H4 skip, committed with good intentions. | Choose by outline logic; adjust size in theme typography settings. |
| ✗ Page builders nesting headings randomly | Builders sometimes assign H2/H3 to design elements like counters and testimonial titles. | Audit builder pages (exercise below) and change decorative headings to styled text. |
Heading Length and Keyword Placement
Keep headings short enough to scan — roughly under 70 characters as a working habit (with a bonus: well-formed H2s/H3s can feed your table of contents and the sitelinks Google shows). Place keywords where they’re natural:
- H1: primary keyword, once, naturally phrased.
- H2s: supporting keywords and question phrasings from the cluster — each used because it labels the section, never inserted for density.
- H3s and below: just describe the content. Not every heading needs a keyword; a page whose every heading repeats “photo cake” reads as stuffed to humans and machines alike.
document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h=>console.log(h.tagName, h.textContent.trim()))You’ll see your page’s real outline exactly as Google parses it. Check: one H1? No skipped levels? No widget junk? Headings that read as a sensible table of contents? Whatever surprises you — that’s your fix list.
Key Takeaways
- Headings are a hierarchy of meaning — the page’s embedded table of contents for readers, Google and AI systems alike.
- One H1, matching the title tag’s promise, carrying the primary keyword.
- Never skip levels downward, and never pick a heading level for its font size — levels are meaning, size is CSS.
- The question heading + first-sentence answer pattern wins featured snippets, PAA slots and AI citations in one move.
- WordPress themes and page builders inject fake headings (logos, widgets, decorations) — audit and fix them.
- The scan test: reading only your headings should tell the page’s whole story.