How to structure H1, H2, and H3 tags on a page

Headings are the page’s outline, not styling:

Headings tell readers and machines what the page is about. They mark order and level of importance. They’re the page’s outline. Visual size is a side effect, not the point.

This matters because most pages get headings wrong in the same way. Someone wants a line to look bigger, so they wrap it in an H2. Or a designer hands over a mockup where the call-to-action sits in an H1 because “that’s the largest text.” The HTML records a structure that doesn’t exist. Screen readers read it. Google’s systems read it. A page with bigger fonts in the wrong places might look fine to a sighted reader scrolling fast, but the underlying outline reads like nonsense.

Three things depend on the heading outline:

Reader scannability. Readers often skim headings before deciding whether to read paragraphs.
Accessibility. Screen readers navigate by heading level. Users with visual impairments pull up a heading list to understand the page before reading anything.
Search visibility. Google uses heading hierarchy to understand what a page covers and how it’s organized. Heading structure isn’t a major ranking factor in itself. But it influences whether the page structure is easy to interpret, whether a section gets pulled into a featured snippet, and how AI-generated summaries excerpt the content.

So heading structure isn’t a design decision. It’s a structural one. The right way to think about it: write the outline first, then style it.

One H1, the only one:

The H1 names the page’s primary topic. In practice, one H1 per page keeps the structure clearest.

Title tag is what shows in search results. H1 is what shows on the page itself. Different surface, different job. The title tag and H1 don’t need to match word-for-word, but they need to point at the same topic.

What goes in the H1:

The page’s actual subject, in plain language
Specific enough that it couldn’t fit ten other pages on the same site
Short enough to scan, not stuffed with keywords

What doesn’t go in the H1:

The site logo, even if visually it’s the largest element
The site name on all pages (that’s the title tag’s job)
A navigation label like “Services” or “Blog” unless the page is genuinely an index

Google’s John Mueller has said that a page can rank with no H1, with one H1, or with five H1s. Google doesn’t enforce a single H1. Multiple H1s, common in HTML5 sectioning elements like <article> and <section>, won’t break ranking. But there’s a gap between what Google tolerates and what works best.

One H1 still works best for two reasons. Screen reader users use the H1 as the page’s entry point: WCAG-aligned accessibility checkers flag pages with zero or multiple H1s because the heading-navigation shortcut becomes ambiguous. And outline clarity collapses when multiple sections claim top-level status. The outline becomes a flat list of equal-weight topics instead of one topic with subsections.

The practical rule: write one H1 that names the page. Place it once near the top of the main content. Let H2s carry the structural weight underneath.

H2 = section, H3 = subsection (never flipped):

H2s are the page’s chapters. H3s are subsections inside those chapters. The relationship should stay strict: an H3 lives under an H2, never above one, never instead of one.

Think of a page on choosing running shoes:

H1: How to Choose Running Shoes for Beginners
  H2: Match the shoe to your foot type
    H3: Flat feet and stability shoes
    H3: High arches and cushioning
  H2: Match the shoe to your running surface
    H3: Road running
    H3: Trail running
  H2: When to replace your shoes

Each H2 names a section of the page that could stand on its own. Each H3 names a smaller topic that belongs to its parent H2.

What goes wrong: writers use H3 because the text is “less important” without checking whether there’s an H2 above it. A heading sequence that goes H1 → H3 → H3 → H2 isn’t a hierarchy. It’s a list with arbitrary sizes. Screen readers reading the outline get whiplash.

A clean H2 also helps Google’s snippet selection. When a user’s query closely matches one of your H2s, the text immediately following that H2 becomes a strong snippet candidate. Vague H2s like “Overview” or “More Info” don’t earn that placement. Specific H2s like “How long should a title tag be?” do.

The discipline is simple. Before writing an H3, ask: which H2 is this under? If the answer is “none,” promote it to H2 or restructure the section. No exceptions.

Skip a level, break the outline:

The heading hierarchy goes in order: H1 → H2 → H3 → H4. Skipping a level (H1 directly to H3, for example) breaks the outline in ways that matter.

This is a WCAG 1.3.1 issue, not a style preference. The W3C Web Accessibility Initiative is explicit: skipping ranks can confuse assistive technology users and should be avoided where possible. A page with H1 followed directly by H4 reads as if two levels of structure exist between them that don’t actually exist on the page. Screen reader users navigating by heading get false signals about depth.

The before-and-after:

Broken hierarchy	Fixed hierarchy
H1: University Programs	H1: University Programs
H4: About Our Campus	H2: About Our Campus
H2: Student Life	H3: History
H4: Housing	H3: Location
	H2: Student Life
	H3: Housing Options
	H3: Dining Services

The broken version skips from H1 to H4 (missing H2 and H3), then jumps backward to H2, then forward to H4 again. The fixed version moves down one level at a time and only moves back up at the end of a section.

One nuance: it’s fine to skip ranks when closing a subsection. An H2 starting a new major section can follow an H4 that closed the previous one. What’s not okay is opening a deeper rank without the rank above it appearing first.

When this gets violated in practice, the cause is usually template-driven. A CMS theme assigns H4 to sidebar headings, or a block in the page builder hardcodes a level that doesn’t fit the article structure. Fix the template, not the workaround.

Style with CSS, structure with semantics:

Heading level is about structure. Heading appearance is about CSS. The two are independent.

A common mistake: a writer wants a piece of text to look smaller, so they wrap it in H3 instead of H2. Now the page has a structural hierarchy that doesn’t match the actual content. The fix isn’t to choose a different heading level. The fix is to keep the correct heading level and adjust the CSS so it looks right.

Wrong approach	Right approach
"I'll use H4 here because H3 looks too big"	Use the correct H2 or H3 for the structure, then style it with CSS to look how you want
"I'll style this paragraph as big bold text instead of a heading"	If it's a section title, use a heading element and style it with CSS
"I'll add an extra H1 because I want a second big headline"	Use H1 for the page title only, then create the visual emphasis you want with CSS

The HTML headings are doing two jobs: organizing the document outline (for crawlers and screen readers) and providing default visual sizes (for sighted readers). The visual job is the easier one to override. The structural job is the one that matters for users who can’t see the visual cues.

If you find yourself choosing a heading level based on how big you want the text to be, stop. Pick the level that matches the structure, then style.

Different pages, different heading rhythms:

The structure of headings isn’t the same across page types. A long-form blog post needs more depth than a product page. A FAQ page needs a different shape than a tutorial.

Page type	H1	H2 pattern	H3 usage
Long-form blog post	Article title	Major topics or argument steps	Subsections under each H2, often 1-3 per H2
Product page	Product name	Specs, fit, comparison, FAQ	Sparse, only when sections need internal divisions
FAQ page	Topic of the FAQ collection	Each question as its own H2	Rarely needed, since each Q is self-contained
Tutorial	The procedure being taught	Sequential steps or stages	Substeps within complex stages
Landing page	The offer or value proposition	Benefits, features, social proof, FAQ	Usually shallow, marketing pages favor scannability over deep nesting
Documentation	Page topic	Conceptual sections, then reference sections	Heavy use, often 3-5 levels deep for technical docs

For a long-form blog post, the H2s should read like the table of contents a curious reader would expect. The H3s drop into specifics inside each. A 3,000-word article that lives entirely under H2s with no H3s is under-structured. One that nests four or five levels deep is over-structured.

For a product page, the H2 pattern is functional rather than narrative. “Specifications,” “What’s in the box,” “Reviews,” “Frequently asked questions.” Each H2 is a section the buyer might jump to. H3s appear only when a section needs internal categories.

For a FAQ page, each question gets its own H2. The H2 wording should mirror how users actually ask, because question-style H2s are strong candidates for People Also Ask boxes and featured snippets.

For documentation, depth is common and expected. Technical docs nest H4 and H5 because the structure of the material demands it. The discipline is consistency: the same level should mean the same kind of content. Same level, same purpose.

Screen readers jump by heading:

A user with a screen reader doesn’t read a page top to bottom. They navigate it by heading.

When a screen reader loads a page, the user can pull up a list of all the page’s headings, sorted in document order with their levels labeled. From that list, they can jump directly to the section they want. A page with a clean heading outline becomes navigable in seconds. A page without headings, or with broken hierarchy, becomes a wall of text the user has to listen through linearly.

WCAG criteria that apply to headings:

1.3.1 Info and Relationships (Level A). Information and structure conveyed visually must also be available programmatically. If something looks like a heading, it must be marked up as one.
2.4.6 Headings and Labels (Level AA). Headings must describe the topic or purpose of their section. “More Info” fails. “Shipping rates by region” passes.
2.4.10 Section Headings (Level AAA). Section headings are used to organize content. This is the strictest level and recommends headings on all major sections.

The accessibility fixes are small and high-impact:

Replace bold paragraphs that act as headings with actual heading elements
Don’t wrap the site logo or navigation in an H1
Don’t use empty heading elements for visual spacing
Make sure headings describe what comes after them, not just label a region

Accessibility tools like WAVE, axe DevTools, and Lighthouse will flag most heading violations automatically. Run them. The fixes that come back are one-line changes that meaningfully improve the experience for users on assistive technology.

How Google reads the heading outline:

Heading hierarchy isn’t a major Google ranking factor. John Mueller has stated that pages can rank with no H1, one H1, or multiple H1s. Obsessing over the order of headings isn’t where most SEO leverage lives.

But Google does use headings to understand pages. The same Google statements describe headings as a signal for what a chunk of text or image is about. A clean outline helps Google’s systems match queries to sections of the page, which influences:

Featured snippet selection. When a query matches an H2 phrase closely, the text immediately following that H2 is a strong candidate to become the snippet. Pages with vague H2s lose this real estate to pages with specific ones.
People Also Ask boxes. Question-style H2s and H3s appear in PAA results when the heading text closely matches a real user question.
AI Overview extractability. Generative search features prefer pages with clear definitions and direct answers, with strong headings near the relevant content. A well-structured page is more extractable.
Topical understanding. Heading hierarchy helps Google map which page handles which subtopic on a site, which affects how queries get routed.

The mistake isn’t taking headings seriously. The mistake is treating heading optimization as a ranking lever instead of a structural one. Headings won’t make a thin page rank well. But they will help a good page get understood, extracted, and surfaced in places where structure is what gets you in the door. That’s the actual job.

Five mistakes that break heading structure:

Most heading problems on real pages cluster into a small set of patterns. Each has a clean fix.

Multiple H1s through template noise. A site logo wrapped in H1, plus an H1 for the page title, plus an H1 inside an <article> block. The structure presents three competing main topics. Fix: Audit the template. Logos go in non-heading elements. Article H1s should be unique to that article. One H1 per page.

Skipped heading levels. H1 jumps straight to H3, or H2 skips H3 and goes to H4. Fix: Walk through the page’s headings as a flat list. Each entry should be one level deeper than its parent or close a section before opening a new one. Don’t skip.

Headings used for visual styling. A line of text gets wrapped in H4 because the writer wanted it bold and large. Fix: Pick the heading level that matches the structure, then style with CSS. If the text isn’t actually a section heading, use <strong> or <p class="emphasis"> instead.

Vague heading text. “Overview,” “More Info,” “Introduction,” “Get Started.” Headings that label without describing. Fix: Rewrite each heading to name what’s in the section. “Why our pricing model changed in 2026” beats “Overview.” “What runners with flat feet should look for” beats “Introduction.”

Title-H1 disconnect. The title tag promises one thing, the H1 says something noticeably different. Fix: The two don’t have to match exactly, but they should point at the same topic. The title tag is optimized for SERP display. The H1 confirms the page is about what the user expected when they clicked.

A bonus pattern worth flagging: headings that mirror the navigation menu. If a page’s only H2s are the same labels that appear in the sidebar (Services, About, Contact), the page has no content-specific outline. The navigation menu lives in <nav>, not in heading elements.

Structure is silent. Until it isn’t:

A page with a good heading outline doesn’t draw attention to itself. Sighted readers scan the headings and find what they need. Screen reader users navigate the outline and reach their section. Google’s systems map the topics and connect the page to relevant queries.

A page with a broken heading outline draws attention to itself in all the wrong ways. Users struggle to orient themselves when they can’t quickly find what they came for. Accessibility audits flag violations. Featured snippet opportunities get handed to competitors with clearer structure.

The work is mostly invisible. One H1 per page. H2s that name sections. H3s that nest under their parents. No skipping levels. No headings used for styling. Specific text instead of vague labels.

That’s the whole job. The pages where it’s been done correctly never get noticed for their headings. The pages where it hasn’t always do.

Related posts: