Jerarquía de encabezados

Definición Técnica

La jerarquía de encabezados se refiere a la estructura lógica y ordenada de elementos de encabezado (h1, h2, h3, h4, h5, h6) que organiza el contenido de una página web en niveles jerárquicos. Esta estructura es esencial para que las tecnologías de asistencia puedan navegar eficientemente y para que los usuarios comprendan la organización del contenido.

Reglas de Jerarquía

Estructura Correcta

1. Un solo h1 por página: Representa el título principal
2. No saltar niveles: No usar h3 después de h1 sin h2
3. Orden lógico: h1 → h2 → h3 → h4...
4. Niveles consecutivos: Mantener secuencia lógica

Ejemplo Correcto

<!-- ✅ Correcto: Jerarquía lógica -->
<h1>Título Principal de la Página</h1>

  <h2>Sección Principal 1</h2>
    <h3>Subsección 1.1</h3>
    <h3>Subsección 1.2</h3>
      <h4>Sub-subsección 1.2.1</h4>

  <h2>Sección Principal 2</h2>
    <h3>Subsección 2.1</h3>

Errores Comunes

❌ Estructura Incorrecta

<!-- ❌ Incorrecto: Saltar niveles -->
<h1>Título</h1>
<h3>Subsección</h3> <!-- Falta h2 -->

<!-- ❌ Incorrecto: Múltiples h1 -->
<h1>Título 1</h1>
<h1>Título 2</h1>

<!-- ❌ Incorrecto: Usar estilos en lugar de semántica -->
<p style="font-size: 2em; font-weight: bold;">Título</p>

Beneficios

Para Lectores de Pantalla

• Navegación rápida: Saltar entre encabezados
• Comprensión de estructura: Entender organización del contenido
• Contexto: Saber dónde se está en la página

Para SEO

• Mejor indexación: Motores de búsqueda entienden estructura
• Relevancia: Encabezados indican temas importantes
• Rich snippets: Posibilidad de resultados estructurados

Criterio WCAG 2.4.6

Encabezados y Etiquetas (Nivel AA): Los encabezados y etiquetas describen el tema o propósito.

Referencias

• WCAG 2.4.6 Headings and Labels
• WebAIM - Semantic Structure

Términos Relacionados

• Semántica HTML
• Navegación por teclado
• Lector de pantalla