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 del cliente 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 el cliente 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 el cliente 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.