Validación HTML: Consider using the “h1” element as a top-level heading only — or else use the “headingoffset” attribute (otherwise, all “h1” elements are treated as top-level headings by many screen readers and other tools).

Acerca de este problema HTML

Multiple h1 elements on a page can confuse screen readers and other assistive tools, which treat every h1 as the top-level heading.

HTML headings (h1 through h6) form an outline of your document. The h1 element represents the highest-level heading, and most accessibility guidelines recommend using only one h1 per page. When screen readers encounter multiple h1 elements, they may present them all as equally important top-level sections, making it harder for users to understand the page structure.

Instead of using multiple h1 elements, use a proper heading hierarchy. Start with a single h1 for the main topic of the page, then use h2 for major sections, h3 for subsections, and so on. This creates a clear, navigable document outline.

The W3C warning also mentions a headingoffset attribute, which is a proposed feature for <section> elements that would allow automatic heading level adjustment. However, this attribute is not yet implemented in any browser, so you should not rely on it.

Example with the issue

<body>
  <h1>My Website</h1>
  <section>
    <h1>About Us</h1>
    <p>Some content here.</p>
  </section>
  <section>
    <h1>Contact</h1>
    <p>More content here.</p>
  </section>
</body>

Example with proper heading hierarchy

<body>
  <h1>My Website</h1>
  <section>
    <h2>About Us</h2>
    <p>Some content here.</p>
  </section>
  <section>
    <h2>Contact</h2>
    <p>More content here.</p>
  </section>
</body>

Keep one h1 per page and nest subsequent headings using h2 through h6 to reflect the logical structure of your content. This approach is well-supported across all browsers and assistive technologies today.