<h1>–<h6> — Frontend Classroom

Los encabezados <h1> a <h6> son seis elementos de bloque que declaran la jerarquía del contenido de la página. No existen para hacer texto grande o pequeño — existen para comunicarle al navegador, al lector de pantalla y al motor de búsqueda qué tan importante es cada sección y cómo se organizan entre sí.

Cada número define el nivel de importancia: <h1> es el título de toda la página, el “de qué trata este documento”. Los <h2> son los capítulos o secciones principales; los <h3> son subsecciones dentro de cada capítulo; y así hasta <h6>, que rara vez se usa en la práctica. Juntos forman el outline del documento: una tabla de contenidos implícita que los lectores de pantalla usan para que el usuario pueda navegar de sección en sección sin leer el contenido completo.

El tamaño visual es un efecto colateral del estilo por defecto del navegador, y se puede cambiar completamente con CSS sin alterar la jerarquía. Esto es crucial: el nivel del encabezado debe reflejar la estructura real del contenido, no el tamaño de fuente que querés en pantalla. Si querés texto grande que no es un título de sección, usás CSS sobre un <p> o <span> — no un encabezado fuera de contexto.

Cómo funciona

El navegador usa los encabezados para construir el outline del documento: una tabla de contenidos implícita que describe su estructura. Los lectores de pantalla navegan la página saltando de encabezado en encabezado con una tecla de acceso rápido — si la jerarquía está rota, la navegación se vuelve imposible para usuarios con baja visión.

Los motores de búsqueda también leen el outline para entender de qué trata cada sección. Un <h1> con la palabra clave principal comunica el tema de la página; los <h2> y <h3> comunican los subtemas.

Todos son elementos de bloque: ocupan toda la anchura disponible y generan saltos de línea antes y después. El navegador aplica estilos tipográficos por defecto (tamaño y peso de fuente decreciente de <h1> a <h6>), pero esos estilos son completamente sobreescribibles con CSS.

Modelo de contenido

Los encabezados aceptan contenido de flujo en línea: texto, <em>, <strong>, <abbr>, <time>, <span>, <a> y otros elementos en línea. No pueden contener elementos de bloque como <p>, <div>, <section> ni otro encabezado anidado.

Su contexto válido es cualquier lugar donde se admita contenido de flujo: <body>, <section>, <article>, <aside>, <nav>, <header>, <footer>.

Sintaxis

<h1>Título principal de la página</h1>
<h2>Sección principal</h2>
<h3>Subsección dentro de la sección</h3>
<h4>Sub-subsección</h4>
<h5>Nivel muy profundo (raro)</h5>
<h6>El nivel más profundo (rarísimo)</h6>

Atributos

Los encabezados no tienen atributos propios. Aceptan los atributos globales de HTML (id, class, lang, data-*, etc.). El id es especialmente útil para que los encabezados sean destinos de enlaces de anclaje:

<h2 id="instalacion">Instalación</h2>
<!-- Más abajo o en otro lado: -->
<a href="#instalacion">Ir a instalación</a>

Accesibilidad

Los lectores de pantalla como NVDA, JAWS o VoiceOver anuncian el nivel del encabezado al leerlo: “Heading level 2, Sección principal”. También ofrecen navegación rápida por headings (tecla H en NVDA, por ejemplo), lo que permite a usuarios con baja visión explorar la estructura de la página sin leer todo el contenido.

Una jerarquía correcta es tan importante para la accesibilidad como para el SEO: ambos dependen de que el outline sea coherente.

Ejemplo realista

<h1>Recetas de cocina argentina</h1>

<h2>Platos principales</h2>
<h3>Milanesa napolitana</h3>
<p>La milanesa napolitana es un clásico de la cocina porteña.</p>

<h3>Asado</h3>
<p>El asado es la tradición familiar de los domingos.</p>

<h2>Postres</h2>
<h3>Alfajores</h3>
<p>Los alfajores se rellenan con dulce de leche.</p>

Cuándo usar qué nivel

Nivel	Cuándo usarlo
`<h1>`	Una vez por página: el título principal que describe el tema de toda la página
`<h2>`	Secciones principales dentro de la página
`<h3>`	Subsecciones dentro de cada `<h2>`
`<h4>`–`<h6>`	Subdivisiones más profundas; en la práctica `<h4>` se usa poco y `<h5>`/`<h6>` raramente

Nunca elegir el nivel por el tamaño visual. Si necesitás un texto grande que no es un título de sección, usá CSS sobre un <p> o <span>. Si un <h3> te parece muy grande, reducilo con CSS — no uses <h5> porque se ve del tamaño que querés.

Notas, gotchas e interacción

Un solo <h1> por página. Más de uno le comunica al navegador y a los buscadores que hay múltiples “temas principales” — es una contradicción lógica.
No saltear niveles. Ir de <h2> directo a <h4> sin un <h3> en el medio es como tener un capítulo 2.4 sin pasar por el 2.3. Los lectores de pantalla anuncian un salto inesperado que desorienta al usuario.
<h1> dentro de <section> o <article>. Aunque la especificación de HTML5 introdujo el concepto de “sectioning content” que habilitaría múltiples <h1>, los lectores de pantalla reales no implementaron el outline basado en secciones. La regla práctica sigue siendo: un solo <h1> por página, aunque esté dentro de un <article>.
No uses headings para estilar. Un error muy común es elegir <h4> o <h5> para un texto que no es título de sección, solo porque el tamaño por defecto del navegador calza bien. Eso corrompe el outline del documento.

Vigente / legacy

Los seis niveles de encabezado son parte de HTML desde sus primeras versiones y están completamente vigentes. No hay forma legacy. En versiones muy antiguas de HTML se usaba el atributo align (<h1 align="center">) para centrar encabezados — eso es legacy y hoy se hace con text-align en CSS.