Curso HTML 4.2 Encabezados (h1 a h6) y jerarquía del contenido

Encabezados en HTML 4.2: Introducción y propósito

Los elementos <h1> a <h6> son esenciales para estructurar el contenido de una página HTML. Cada uno representa un nivel de encabezado distinto:

• <h1>: Título principal del documento (nivel más alto).
• <h2>: Secciones principales dentro del documento.
• <h3>: Subsecciones de <h2>.
• <h4>: Sub-subsecciones anidadas dentro de <h3>.
• <h5>: Nivel aún más profundo dentro de <h4>.
• <h6>: Nivel mínimo de jerarquía.

Importancia semántica y accesibilidad

Más allá del tamaño tipográfico, los encabezados aportan:

1. Jerarquía clara para lectores humanos y máquinas de búsqueda (SEO).
2. Facilidad de navegación para tecnologías de apoyo (lectores de pantalla).
3. Mapa de contenido: permite generar índices automáticos.

Buenas prácticas en el uso de encabezados

Evita saltos de nivel arbitrarios. La secuencia ideal es:

<h1>Título principal</h1>
<h2>Sección 1</h2>
  <h3>Subsección 1.1</h3>
  <h3>Subsección 1.2</h3>
    <h4>Detalle de 1.2</h4>
<h2>Sección 2</h2>
    

Evita este tipo de saltos:

<h2>Sección sin h1 previo</h2>
<h4>Brinco de nivel desde h2 a h4</h4>
    

Tablas de comportamiento por defecto

Ejemplo práctico de documento estructurado

<!-- Nivel principal -->
<h1>Guía Definitiva de HTML</h1>

<!-- Sección 1 -->
<h2>Introducción al Lenguaje</h2>
<p>HTML (HyperText Markup Language) es el lenguaje base de la web...</p>

  <!-- Subsección 1.1 -->
  <h3>Historia de HTML</h3>
  <p>Fue creado por Tim Berners-Lee en 1991...</p>

  <!-- Subsección 1.2 -->
  <h3>Versiones y estándares</h3>
    <h4>HTML 2.0</h4>
    <p>Publicado en 1995...</p>
    <h4>HTML 4.01</h4>
    <p>Incluye características de accesibilidad...</p>

<!-- Sección 2 -->
<h2>Estructura del Documento</h2>
<p>Todo documento HTML se compone de bloques semánticos...</p>

  <!-- Subsección 2.1 -->
  <h3>Elementos de bloque y en línea</h3>
  <p>Los elementos de bloque ocupan todo el ancho disponible...</p>
  

Resumen y recomendaciones finales

• Empieza siempre por <h1> para el título global.
• Mantén la secuencia sin saltos: h1>h2>h3…>h6.
• Utiliza estilos (CSS) externos si quieres modificar colores o tamaños, sin alterar la semántica.
• Apoya la accesibilidad: un lector de pantalla navega por los encabezados.