Jerarquía H1, H2 y H3: ordenar el contenido antes de diseñar

Los encabezados H1, H2 y H3 expresan la estructura de una página: su tema principal, sus secciones y las subsecciones que dependen de ellas. Para quien diseña una web, son una forma de ordenar el contenido antes de elegir tamaños, fuentes o animaciones.

Una frase grande no es necesariamente un encabezado y un H2 no necesita ser pequeño. El nivel describe una relación entre contenidos; su apariencia se define en el diseño. Elegir H3 porque «queda mejor» mezcla ambas decisiones.

Convierte el documento en un esquema

Lee el texto que te han pasado (el documento del cliente, el borrador que llega de marketing o tu propio copy) y escribe qué pregunta contesta cada bloque. Agrupa los que responden a la misma cuestión. Si un apartado no ayuda a explicar la página, decide si debe moverse, resumirse o revisarse con quien lo escribió antes de maquetarlo.

Ejemplo ilustrativo para una página de servicios de identidad visual:

• H1: Identidad visual para marcas que necesitan ordenar su comunicación.
• H2: Qué incluye el proyecto.
• H3: Sistema visual.
• H3: Aplicaciones y archivos de entrega.
• H2: Cómo trabajaremos contigo.
• H2: Proyectos de identidad visual.
• H2: Cómo solicitar una propuesta.

Los H3 desarrollan «Qué incluye el proyecto». Los casos y el contacto son secciones de otro nivel, no detalles del último H3. El esquema permite discutir el alcance con quien encarga la página sin confundirlo con preferencias tipográficas.

Usa títulos que permitan anticipar el contenido

«Qué recibirás al terminar» informa más que «Descubre la diferencia» cuando el bloque enumera entregables. No hace falta repetir la misma keyword en todos los encabezados: cada uno debe describir su sección con naturalidad.

El tutorial de encabezados de W3C explica su papel en la organización y navegación del contenido. Mantén una jerarquía coherente y evita saltos de nivel al abrir subsecciones. Esto ayuda a recorrer la página; no constituye una promesa de posicionamiento.

Entrega estructura y apariencia por separado

En el archivo de diseño, anota qué texto corresponde a cada nivel. Define después sus estilos y variantes responsive. Un título visual de una tarjeta puede ser un encabezado si introduce contenido, pero una etiqueta decorativa no necesita convertirse en uno.

Al trabajar con componentes reutilizables, explica qué contexto espera cada componente. Un bloque que funciona dentro de una sección no debería imponer un nivel incompatible cuando se reutiliza en otra página.

Comprueba la implementación

Revisa el HTML final o pide al equipo de desarrollo un esquema de encabezados. Comprueba que coincide con el contenido, que los títulos describen sus bloques y que las subsecciones están donde corresponde. Repite la comprobación tras cambios del editor de contenidos, no solo en la maqueta inicial.

Para valorar cómo se lee esa estructura en pantalla, continúa con la guía de legibilidad para páginas de clientes. La revisión semántica y la revisión visual resuelven problemas distintos de la misma entrega.

Preguntas frecuentes

¿Cuál es la diferencia entre un encabezado H1, H2, H3 y H4?

El número indica el nivel en la jerarquía de la página, no el tamaño de la letra. El H1 es el título principal y nombra el tema de toda la página; los H2 dividen ese tema en secciones; un H3 es un apartado dentro de un H2, y un H4, un apartado dentro de un H3. HTML admite seis niveles, del H1 al H6.

¿Cuántos H1 puede tener una página?

HTML permite más de uno, y John Mueller, de Google, ha explicado que varios H1 no perjudican el posicionamiento. Aun así, lo más claro suele ser un único H1 que coincida con el tema de la página: facilita la navegación con lector de pantalla y deja claro de qué trata el contenido.

¿Se puede pasar de un H2 a un H4?

Al cerrar apartados, sí: después de un H4 puedes volver a un H2 para empezar una sección nueva. Lo que conviene evitar es saltarse niveles al abrir subsecciones, como poner un H4 directamente bajo un H2, porque quien recorre la página por encabezados entiende que falta un nivel intermedio.

¿Un texto grande en negrita cuenta como encabezado?

No. Lo que convierte un texto en encabezado es la etiqueta HTML (h1, h2, h3…), no su aspecto. Un párrafo con letra grande sigue siendo un párrafo para buscadores y lectores de pantalla, y un H2 puede verse pequeño si el diseño lo pide.