Single H1 per page

ZMD003

Use exactly one <h1> per page to clearly define the primary topic and maintain a predictable document outline.

✅ Good

<h1>Home</h1>
<section>
  <h2>About Us</h2>
  <p>…</p>
</section>

❌ Bad

<h1>Home</h1>
<section>
  <h1>About Us</h1>
  <p>…</p>
</section>

When: Multiple <h1> elements are present

Warning: Only one <h1> allowed per document

Solution: Use a single <h1> and lower-level headings thereafter

Why it matters

Accessibility: Multiple H1s dilute the page’s primary topic and confuse assistive-tech navigation :contentReference[oaicite:8]{index=8}.

SEO: Although Google tolerates multiple H1s, a single H1 provides a clearer ranking signal :contentReference[oaicite:9]{index=9}.

In brief

  • Goal: Ensure the page’s primary topic is communicated unambiguously.
  • What to do: Include a single <h1> at the top of the content, then use <h2>–<h6> for subsections.
  • Why: Multiple <h1> tags dilute the page’s main focus and confuse assistive technologies.

Intent

Prevent ambiguity in the document outline by enforcing a single top-level heading.

Benefits

  • Screen-reader users hear a clear entry point to the main content :contentReference[oaicite:5]{index=5}.
  • Users with cognitive disabilities grasp page structure more quickly :contentReference[oaicite:6]{index=6}.
  • Search engines receive an unambiguous signal about your page’s topic :contentReference[oaicite:7]{index=7}.

Techniques

  • H42: Use <h1> for the main page heading and nested <h2>–<h6> for subsections.
  • H65: Validate heading order and count via automated tests or linters.

HTML Semantics

Each <h1>–<h6> element creates an outline; having a single <h1> ensures one root node in that outline tree.

References

Tips & edge cases

  • Lint your HTML to catch accidental extra <h1> tags early :contentReference[oaicite:10]{index=10}.
  • In multi-topic pages, consider splitting content or using <article> with its own <h1> when contextually appropriate :contentReference[oaicite:11]{index=11}.
  • Ensure your page <title> and <h1> match closely for maximum clarity.

See also