ContentPublished01.05.2026

Heading tags H1, H2, H3

Heading levels outline the page: readers scan faster, assistive tech builds a navigable tree, and search engines map sections to intent. Treat them as semantics and accessibility—not a keyword stuffing surface.

In brief

Reserve H1 for the page's primary topic (one clear title on most marketing templates). H2 introduces major sections; H3 nests subtopics. Size and weight belong in CSS—do not pick heading levels just to make text look big.

Hierarchy & meaning

Headings form an outline from general to specific. That outline helps humans skim and gives crawlers a coarse map of which paragraphs belong together. Skipping levels (H2 straight to H5) is not an automatic ranking penalty, but it surprises screen-reader users and makes long documents harder to maintain.

One H1 is a practical default for landing pages and CMS articles—it keeps the primary topic obvious. Multi-H1 layouts exist in complex apps; if you use them, document the pattern and test with assistive tech.

Headings & search

Heading text can influence snippets and on-SERP table-of-contents style treatments. Write natural phrases. Mirroring the same long-tail keyword in every H2 rarely helps users and can read as stuffing—match each section's intent instead.

  • Align H1 meaning with the page title element without awkward duplication.
  • Avoid identical H2 labels across URLs when sections actually differ.
  • For YMYL topics, precise headings improve scan-trust and fact-checking.
Visually hidden headings added only for crawlers are risky: they can trigger quality issues and harm accessibility.

Accessibility

Screen-reader users often navigate by headings alone. Fake headings (styled divs) or erratic levels break that workflow faster than they hurt classic rankings signals.

  • Prefer real h1–h6 elements over divs with heading-like styling.
  • Keep progression logical—do not jump levels purely for design spacing.
  • In accordions and cards, ensure the visible section title maps to a heading in the DOM when it behaves like a section title.

HTML example

Minimal article skeleton: one H1, two H2 sections, one nested H3.

HTML
<h1>H1–H3 headings: hierarchy for the web</h1>
<p>Intro paragraph...</p>

<h2>Why structure matters</h2>
<p>Section body...</p>

<h3>For readers and crawlers</h3>
<p>Nested subsection...</p>

<h2>Common mistakes</h2>
<ul>
  <li>Choosing levels for font size</li>
  <li>Multiple competing H1s without layout rationale</li>
</ul>

Common mistakes

  • Empty or boilerplate headings reused sitewide.
  • Related-posts rails coded as H2 at the same rank as core article sections.
  • Deep stacks of H3 with no H2 parent—usually a sign the outline needs restructuring.
  • Marketing hero text and SEO H1 telling two different stories.

Checklist

  • Single clear H1; cascade H2 → H3 intentionally.
  • Each heading reads well out of context and matches the following body copy.
  • Visual styling via CSS; semantic level reflects document structure.
  • Smoke-test with keyboard heading navigation or automated a11y checks.
FAQ

Common questions

It is the simplest pattern for marketing pages. HTML allows multiple H1s when regions are clearly separated—use that sparingly and test accessibility.
No. Accurate section labels outperform forced repetition.
Browsers will render it, but assistive-tech users expect predictable steps—avoid skips unless you refactor the outline.
Not directly. Indirectly, broken accordions or layout shifts around headings can hurt UX metrics.
Keep a single primary message—either the hero line is the H1 or the H1 is concise SEO text with a visible subheading, but avoid two unrelated main topics above the fold.
Direct contacts

Discuss your project?

Share your goals and website context — I will suggest a practical next step.

[email protected]@pavelbarushkaLinkedIn