Validación HTML: Considera usar el elemento "h1" únicamente como encabezado de nivel superior (todos los elementos "h1" son tratados como encabezados de nivel superior por muchos lectores de pantalla y otras herramientas).

Acerca de este problema HTML

Los elementos de encabezado HTML <h1> hasta <h6> definen la jerarquía de encabezados de un documento. El elemento <h1> representa el encabezado de nivel más alto, y cada nivel subsiguiente (<h2>, <h3>, etc.) representa una subsección más profunda. Esta jerarquía es fundamental tanto para la accesibilidad como para la estructura del documento.

La especificación HTML5 una vez introdujo un “algoritmo de esquema de documento” que habría permitido que múltiples elementos <h1> fueran automáticamente delimitados por sus elementos de sección padre (<section>, <article>, <nav>, <aside>). Bajo este modelo, un <h1> dentro de una <section> anidada habría sido tratado como un encabezado de nivel inferior. Sin embargo, ningún navegador o tecnología de asistencia implementó nunca este algoritmo. El algoritmo de esquema fue finalmente eliminado de la especificación HTML de WHATWG. En la práctica, los lectores de pantalla y otras herramientas tratan cada <h1> en una página como un encabezado de nivel superior, independientemente del anidamiento.

Esto importa por varias razones:

Accesibilidad: Los usuarios de lectores de pantalla navegan frecuentemente por encabezados para obtener una vista general del contenido de una página. Cuando existen múltiples elementos <h1>, la lista de encabezados se vuelve plana y poco clara, dificultando entender la estructura de la página y encontrar contenido específico.
SEO: Los motores de búsqueda usan la jerarquía de encabezados para entender la estructura de la página y la importancia del contenido. Múltiples elementos <h1> pueden diluir la señal semántica del tema principal de tu página.
Cumplimiento de estándares: Aunque usar múltiples elementos <h1> no es un error de validación, el validador W3C presenta esto como una advertencia porque es ampliamente considerado una buena práctica reservar <h1> para el único encabezado de página de nivel superior.

Para corregir esta advertencia, sigue estas pautas:

Usa exactamente un <h1> por página para describir el tema principal o título.
Usa <h2> para secciones principales debajo de él, <h3> para subsecciones dentro de esas, y así sucesivamente.
No te saltes niveles de encabezado (ej., saltar de <h1> a <h3> sin un <h2>).

Ejemplos

Incorrecto: Múltiples elementos `<h1>`

Este ejemplo usa <h1> dentro de cada elemento de sección, lo que activa la advertencia. Los lectores de pantalla presentarán los tres encabezados al mismo nivel, perdiendo la jerarquía prevista.

<h1>My Blog</h1>
<section>
  <h1>Latest Posts</h1>
  <article>
    <h1>How to Write Accessible HTML</h1>
    <p>Writing semantic HTML is important for accessibility.</p>
  </article>
  <article>
    <h1>Understanding CSS Grid</h1>
    <p>CSS Grid makes complex layouts straightforward.</p>
  </article>
</section>

Correcto: Jerarquía de encabezados adecuada

Usa un solo <h1> para el título de la página y anida los encabezados subsiguientes usando los niveles apropiados.

<h1>My Blog</h1>
<section>
  <h2>Latest Posts</h2>
  <article>
    <h3>How to Write Accessible HTML</h3>
    <p>Writing semantic HTML is important for accessibility.</p>
  </article>
  <article>
    <h3>Understanding CSS Grid</h3>
    <p>CSS Grid makes complex layouts straightforward.</p>
  </article>
</section>

Incorrecto: `<h1>` anidado dentro de una sección sin un encabezado padre

Incluso un solo <h1> anidado profundamente dentro del contenido de sección puede activar esta advertencia si la estructura sugiere que no es el encabezado principal de la página.

<section class="about">
  <article>
    <h1>Article heading</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>

Correcto: Sección con su propio encabezado y encabezado de artículo con rango adecuado

<section class="about">
  <h1>About</h1>
  <article>
    <h2>Article heading</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>

Correcto: Estructura de página completa con jerarquía de encabezados clara

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Company Homepage</title>
</head>
<body>
  <header>
    <h1>Acme Corporation</h1>
  </header>
  <main>
    <section>
      <h2>Our Services</h2>
      <h3>Web Development</h3>
      <p>We build modern, accessible websites.</p>
      <h3>Design</h3>
      <p>Our design team creates beautiful interfaces.</p>
    </section>
    <section>
      <h2>About Us</h2>
      <p>We have been in business since 2005.</p>
    </section>
  </main>
</body>
</html>

En esta estructura, los lectores de pantalla presentarán un esquema claro y navegable: un encabezado de nivel superior seguido de subencabezados correctamente anidados que reflejan la organización lógica del contenido.