HTML heading structure H1–H6: complete guide for SEO

HTML provides six heading levels — from <h1> to <h6>. Most authors know that H1 matters for SEO. But few understand the role of H2, H3, and deeper levels, how they interact with search crawlers, and why a broken hierarchy harms both SEO and users.

For a Google crawler, heading tags are the table of contents of a document. The robot uses them to determine the page topic, identify sub-topics, and decide how relevant the document is to a given query. A missing level, an extra H1, or a heading used purely for visual styling destroys this map.

zoom_in

What are H1–H6 heading tags

H1–H6 are semantic HTML elements marking headings at six levels of importance. H1 is the main page heading; H6 is the deepest nested sub-heading. Each level sends the crawler a signal: "the content inside this section is about this topic."

Unlike visual formatting (<b>, <big>, CSS classes), heading tags carry meaning. Browsers render H1 as large bold text by default, but size is just a side effect. You can make H6 visually larger than H1 through CSS, but that won't change the semantics — for search engines and screen readers, H1 is still the primary heading.

Hierarchy: H1, H2, H3 and deeper

A correct heading hierarchy works like a book's table of contents: one book title (H1), several chapters (H2), sub-sections within chapters (H3), and detail paragraphs below that (H4+). Breaking this structure is like tearing chapters out of a book and shuffling the pages.

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

When H4–H6 are needed

H4, H5 and H6 are used rarely — only in large technical documents requiring a fourth or deeper nesting level. Examples: legal contracts, API documentation, medical protocols. For blog articles and landing pages, three levels (H1–H3) cover everything you need.

How headings affect SEO

Every heading tag is a relevance signal. The higher the level, the stronger the signal: H1 outweighs H2, H2 outweighs H3. But all of them participate in assessing how closely a document matches a search query.

Google uses headings to generate featured snippets. When a user asks a question, the algorithm looks for pages where an H2 or H3 matches the query closely and the next content block gives a direct answer. Well-crafted H2 headings are free candidates for position zero.

Headings also feed internal linking: anchor text matching the H2 of the target page reinforces relevance. And sitemaps: some CMSs automatically add id attributes to headings, creating anchor URLs that can be referenced directly in XML sitemaps for deep page sections.

Accessibility and screen readers

Screen readers — assistive software for users with visual impairments — use heading tags as the primary navigation mechanism on a page. The user presses H to jump between headings, hearing the page's table of contents. A broken heading hierarchy makes navigation useless.

Under WCAG 2.1 (criterion 1.3.1 "Info and Relationships"), headings must be implemented via semantic HTML tags, not styles. A button with font-size: 24px; font-weight: bold is not a heading for a screen reader. <h2> is. The difference is enormous.

Rules for using headings

Five rules that cover 95% of real-world situations.

Common mistakes in heading structure

These errors appear in audits of most sites — from small blogs to enterprise platforms.

• Multiple H1s on the page. Most often caused by visual builders that wrap any large block in H1. Find with Screaming Frog → H1 → Multiple. Fix: keep one H1, replace the rest with H2 or styled <div>.
• Headings used for styling, not semantics. A designer chose H4 because it "looks the right size", skipping H2 and H3. The crawler sees H1 → H4 → H1 → H4 — chaos instead of structure.
• Missing H1. After a redesign or CMS migration the H1 disappears from the template. A page without H1 loses its main on-page relevance signal.
• H1 = site name on every page. A CMS template injects the company name into H1 globally. Every page gets the same H1 — site-wide duplicates, zero relevance.
• Skipped levels when nesting. H1 → H3 (H2 missing), H2 → H4 (H3 missing). The screen reader reports an error; the crawler loses the sub-section context.
• Using <p> or <div> instead of heading tags. Text looks like a heading visually but is invisible as a heading to search engines and screen readers. Common in legacy templates.
• Headings that are too long. An H2 with three sentences is not a heading — it is a paragraph. A heading should be readable in one eye movement: 4–12 words is optimal.

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

Tools for auditing heading structure

// Quick heading hierarchy check in the browser console
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

Heading structure checklist

H1

• Exactly one H1 on every page of the site
• H1 contains the primary target query for the page
• H1 aligns in meaning with the title tag (wording may differ)
• H1 is unique site-wide — not duplicated by template
• H1 is not empty, does not contain only an image, and is not hidden via CSS

H2

• H2 follows H1 without skipping a level
• Each H2 describes a distinct major section of the page
• H2s contain secondary queries and LSI terms (naturally, without stuffing)
• H2 phrasing can serve as a featured snippet anchor
• No H2 exists purely for visual effect — only where a new thematic section begins

H3–H6

• H3 nests inside H2, H4 inside H3 (no skipping levels downward)
• H4–H6 are used only when deep nesting is genuinely required
• No H3–H6 tag is used instead of H2 just because of its visual size
• The overall structure reads as a logical table of contents when scanned

Accessibility

• Heading order verified with HeadingsMap or WAVE extension
• All headings implemented as semantic HTML tags, not styled divs
• No hidden headings (display: none, visibility: hidden)
• Every heading carries meaningful content — no empty or placeholder headings

FAQ

Answers to the most common questions about heading structure that come up in audits and content team workshops.