Six heading levels exist in HTML for a reason: pages have nested topics, and headings represent that nesting. The rules for using them haven't changed substantially in twenty years, but the consequences of getting them wrong now matter more than ever — accessibility audits, search rankings, and AI-driven content extraction all rely on heading structure being clean.
The good news: the rules are simple. The bad news: most websites violate them, often because of theme defaults, CMS quirks, or designers using heading tags for visual styling rather than semantic meaning. This guide covers what each heading level should contain, how to audit your site's hierarchy, and the modern conventions that make all three audiences (readers, search engines, screen readers) happy.
The One-Sentence Rule
One H1 per page; H2s for major sections; H3s for sub-sections of those sections; H4–H6 only when you need them, in nested order, never skipping levels.
That's the entire rule. Everything below is explanation and edge cases.
The H1
The H1 is the page's primary heading — the largest, most prominent description of what the page is about. Most pages should have exactly one H1, placed above the main content (typically near the top), describing the page's primary topic.
Modern HTML5 technically allows multiple H1s if they're each inside a <section> or <article> with its own outline — but in practice, most browsers, screen readers, and search engines still treat the first H1 as the page's primary heading and ignore the outline algorithm. So the safe rule is: one H1 per page.
The H1 should:
- Match (or closely resemble) the page's
<title>tag. - Contain the primary keyword for the page.
- Describe the page's content accurately to a reader who scrolled to nothing else.
- Be visible (not hidden via CSS).
Common mistakes:
- The site logo is an H1 on every page. Common in older WordPress themes — the logo is wrapped in an H1 in the header. Result: every page's H1 is the brand name. Fix: in the header, use
<p>or<div>for the brand on inner pages; reserve H1 for the page's primary topic. - No H1 at all. Pages where the largest heading is an H2 or H3 because the designer styled it that way. Always have a clear H1.
- Multiple H1s. Often happens when content authors copy-paste sections that include H1s from other pages. Each page should have exactly one.
- H1 is generic. "Welcome" or "Home" tells search engines (and readers) nothing about the page's actual content.
H2: Major Sections
H2s break the page into its major sections. A long article might have 5–10 H2s covering distinct topics; a product page might have H2s for "Features", "Specifications", "Reviews", "FAQ".
Rules:
- Use H2 for sections directly under the H1.
- Each H2 should be parallel in scope — they should all be the same "level" of detail.
- Include relevant keywords naturally where they fit.
- Make them scannable — readers skim H2s to decide whether to engage.
If your page has H2 → H3 → H2 → H4 → H2, the H4 is wrong. It should be H3 (since the second H3 is a sub-section of an H2). Skipping levels confuses screen readers and the document outline.
H3 and Below
H3s are sub-sections of an H2. H4s are sub-sections of an H3. And so on.
Most pages don't need anything below H3. Pages with deep technical reference content (an API doc, a long-form how-to with sub-procedures) might use H4 and H5. H6 is rare; if you need H6, your content probably benefits from being split into multiple pages.
Rules:
- Never skip levels. H2 to H4 (skipping H3) is wrong.
- Use the level that reflects the actual nesting, not the level that looks right visually.
- If the visual styling needs adjustment, fix the CSS — don't change the heading level.
Accessibility: Why It Matters Beyond SEO
Screen reader users can navigate by headings — pressing 'H' jumps to the next heading at any level, '2' jumps to the next H2, '3' to the next H3, etc. A page with proper hierarchy is navigable; a page with skipped levels or inconsistent nesting is confusing.
Many users with learning disabilities or cognitive impairments rely on heading hierarchy to scan and chunk content. A clean H1 → H2 → H3 structure makes pages dramatically easier to follow than walls of unstructured text.
WCAG 2.1 AA (the most common accessibility standard for compliance audits) requires headings to be used in logical order — meaning no skipping levels. Sites with bad hierarchy fail accessibility audits.
SEO: How Search Engines Use Headings
Search engines parse heading hierarchy to understand the structure of a page. A clean hierarchy helps the crawler:
- Identify the page's primary topic (H1).
- Understand which sections cover which sub-topics (H2s).
- Pull headings into rich snippets and "People Also Ask"-style features.
- Decide what to bold in featured snippets.
- Generate AI-summarised previews (Bard, Gemini, Bing Chat).
The keyword presence in H1s and H2s matters less than the keyword in the title and main content, but it still contributes. More importantly, well-structured headings produce better-formatted snippets in search — which lift CTR even at the same ranking position.
Common Patterns and Anti-Patterns
Pattern: Article structure
H1: Article title (the page's main topic)
H2: Major section 1
H3: Sub-point of section 1
H3: Another sub-point of section 1
H2: Major section 2
H3: Sub-point of section 2
H2: Major section 3
H3: Sub-point of section 3
H4: Detailed sub-detail (rare)Pattern: Product page
H1: Product name
H2: Description
H2: Features
H3: Feature category 1
H3: Feature category 2
H2: Specifications
H2: Reviews
H2: FAQAnti-pattern: Heading levels for visual sizing
H1: Welcome (huge, looks impressive)
H4: Some text in slightly smaller size (H4 was just for the visual)
H2: Now we want a section heading visually styled differentlyHeadings should reflect document structure, not font size. Fix the CSS to style the right level appropriately.
Anti-pattern: Multiple parallel H1s
H1: Section 1
H1: Section 2
H1: Section 3Use one H1 for the page topic; H2s for the parallel sections.
Auditing Your Site
Several ways to find heading problems:
- Browser extensions like HeadingsMap or WAVE display the heading structure of any page visually.
- Meta Tag Checker reports the H1, H2, and H3 hierarchy for any URL.
- Lighthouse / accessibility audits in Chrome DevTools flag missing H1s and skipped levels.
- Screaming Frog or similar crawlers can extract every page's H1/H2/H3 across the entire site for bulk auditing.
Fixes That Cost Almost Nothing
For most sites, the heading audit produces a small set of recurring issues, all fixable in templates rather than per-page:
- Logo wrapped in H1 on inner pages. One CSS/template change.
- Sidebar widget headings using H2 when they should be H3 or lower. Update the widget templates.
- Footer column headings using H4 when they should be H2 or H3. Same — template update.
- Pages without an H1. Audit your post/page templates and ensure each has an explicit H1.
- Skipped levels. Often a content authoring habit — train authors to think in document outlines, not visual styling.
None of these takes more than a few hours to fix once identified. The hard part is identifying them — and a regular audit with Meta Tag Checker or a similar tool keeps the issue list small enough to action.
The Modern Mental Model
Think of your page like a textbook chapter:
- The H1 is the chapter title.
- H2s are the section headings.
- H3s are sub-section headings.
- H4s are sub-sub-section headings (used sparingly).
- H5–H6 are nearly never needed.
If you can read just the headings of your page top-to-bottom and follow what the page is about, the hierarchy is right. If the heading-only outline is gibberish, the hierarchy is broken — and so is the page from the perspective of every reader who skims rather than reads.