Encabezados — Fundamentos de HTML y CSS

• ¿Qué son los encabezados en HTML?
• Reglas de los encabezados
  • Regla 1: Solo un <h1> por página
  • Regla 2: Respetar el orden de los encabezados
  • Regla 3: Usar encabezados según su importancia, no por su tamaño
  • Ejemplo: Organizando un sitio web

Cuando escribimos un documento extenso, como un informe o un ensayo, es importante dividirlo en secciones para que sea fácil de leer y navegar. En HTML, usamos encabezados para estructurar y jerarquizar el contenido de una página web.

¿Qué son los encabezados en HTML?

Existen seis niveles de encabezados, desde <h1> (el más importante) hasta <h6> (el menos importante). Cada nivel representa una jerarquía en el contenido, similar a los títulos y subtítulos en un libro. La estructura típica de los encabezados es la siguiente:

<h1>Encabezado principal</h1>
<h2>Subtítulo 1</h2>
<h3>Subtítulo 1.1</h3>
<h3>Subtítulo 1.2</h3>
<h2>Subtítulo 2</h2>
<h3>Subtítulo 2.1</h3>
<h4>Subtítulo 2.1.1</h4>

Reglas de los encabezados

Al utilizar encabezados, es importante seguir ciertas reglas para que la estructura sea clara y correctamente interpretada por los navegadores y motores de búsqueda.

Regla 1: Solo un <h1> por página

El <h1> define el tema principal del documento y solo debe aparecer una vez por página. Piensa en él como el título de un libro.

Regla 2: Respetar el orden de los encabezados

Después de un <h1> debe seguir un <h2>, luego <h3>, y así sucesivamente. No saltes niveles sin necesidad.

✅ Correcto:

<h1>Título principal</h1>  
<h2>Sección importante</h2>  
<h3>Subsección dentro de la sección</h3>  

❌ Incorrecto:

<h1>Título principal</h1>  
<h3>Subsección sin un <h2> anterior</h3>  

Regla 3: Usar encabezados según su importancia, no por su tamaño

Algunas personas eligen <h4> o <h5> solo porque necesitan texto más pequeño. Sin embargo, los estilos se pueden ajustar con CSS, por lo que los encabezados deben usarse según su significado y no por su apariencia.

Ejemplo: Organizando un sitio web

Imagina que tienes un sitio web sobre programación y quieres estructurar la información correctamente con encabezados.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen