Curso HTML 15.2 Uso correcto de encabezados para jerarquía de contenidos (h1–h6)

1. Semántica y propósito de los encabezados

Los encabezados (<h1> a <h6>) sirven para definir la estructura y la jerarquía de un documento HTML.
Cada nivel indica la importancia relativa del texto que encabeza.
Además de la presentación visual, los encabezados aportan información clave a:

• Lectores humanos: ofrecen una guía clara de contenidos.
• Motores de búsqueda (SEO): ayudan a indexar y a entender la relevancia del contenido.
• Dispositivos de asistencia (lectores de pantalla): posibilitan un acceso semántico mediante la “outline algorithm”.

2. Reglas fundamentales de jerarquía

1. Nunca omitas <h1> si tu página es independiente. Debe haber un único <h1> por documento.
2. Desciende los niveles de manera gradual: de <h2> a <h3>, de <h3> a <h4>, y así sucesivamente.
3. Evita saltos de nivel (por ejemplo, pasar de <h2> a <h4> sin un <h3> intermedio).
4. Emplea etiquetas de encabezado en función de la estructura lógica, no de la apariencia visual. El estilo (tamaño, color) se debe controlar con CSS por fuera de la semántica.

3. Impacto en accesibilidad y SEO

Un uso apropiado de <h1>–<h6> mejora la experiencia de todos:

Los lectores de pantalla generan un “mapa” del documento basándose en estos niveles.
Si la jerarquía está rota, el usuario queda desorientado.
Asimismo, los motores de búsqueda otorgan más peso a los encabezados de nivel alto (<h1>, <h2>) a la hora de indexar y rankear contenido.

4. Ejemplos prácticos

4.1 Ejemplo de estructura correcta

<article>
  <h2>Tienda de Libros en Línea</h2>  <!-- Nivel principal de la sección -->

  <section>
    <h3>Sección: Ficción</h3>           <!-- Subdivisión de nivel 2 -->
    <ul>
      <li>Novelas clásicas</li>
      <li>Ciencia ficción</li>
      <li>Fantasía épica</li>
    </ul>
  </section>

  <section>
    <h3>Sección: No Ficción</h3>
    <ul>
      <li>Historias reales</li>
      <li>Biografías</li>
      <li>Ensayos</li>
    </ul>
  </section>

  <section>
    <h3>Sección: Contacto</h3>
    <p>Para consultas, envía un correo a info@libreria.com</a>.</p>
  </section>
</article>
    

<article>
  <h2>Tienda de Libros en Línea</h2>
  
  <!-- SALTO DE NIVEL: Se usa h4 en lugar de h3 -->
  <h4>Ficción</h4>    
  <ul>
    <li>Novelas clásicas</li>
  </ul>

  <!-- RETROCEDE NIVEL: Usa h3 después de h4 -->
  <h3>No Ficción</h3>
  <ul>
    <li>Biografías</li>
  </ul>

  <!-- USO INADECUADO: Se salta varios niveles sin coherencia -->
  <h5>Contacto Detallado</h5>
  <p>Correo: contacto@libreria.com</p>
</article>