Responsive, accesibilidad y rendimiento
La jerarquía de encabezados explica cómo se organiza una página. El tamaño tipográfico decide cómo se presenta esa organización.
Ambas decisiones se relacionan, pero no son intercambiables. Un texto pequeño puede ser un encabezado y un titular enorme puede ser solo una frase expresiva. Lo importante es reconocer qué función cumple cada uno.
Esta diferencia ayuda a diseñar con más precisión y a revisar propuestas de IA que parecen ordenadas, aunque su estructura no lo esté.
H1, H2 y H3 como relaciones
En una página ficticia de encargos de cerámica, el H1 podría ser «Cerámica por encargo». Dos H2 dividirían el contenido: «Qué puedes encargar» y «Cómo preparar tu consulta».
Dentro del primer apartado, «Vajilla» y «Piezas decorativas» podrían ser H3. Desarrollan ese grupo. El segundo H2 inicia otro apartado del mismo nivel que el primero.
W3C explica cómo los encabezados comunican la organización y permiten ciertas formas de navegación por la estructura. La jerarquía expresa relaciones; no es una colección de estilos para elegir por tamaño.
Esquema de una página ficticia de encargos. Los H3 desarrollan el H2 al que pertenecen. Toca para ampliar.
Decidir el nivel antes de ajustar la tipografía
Pregunta si el nuevo contenido abre un apartado o desarrolla uno existente. Después decide su nivel y ajusta la apariencia con estilos.
En un editor visual, elegir H4 porque «es más pequeño» puede introducir una relación que no existe. Puedes mantener un H2 y modificar su tamaño sin cambiar su función.
No hace falta que todos los encabezados tengan la misma longitud. Sí conviene que describan el contenido que presentan. Un título expresivo puede acompañarse de una formulación que oriente mejor.
Un ejemplo sencillo en HTML
Este fragmento muestra relaciones de contenido, no una página completa ni una plantilla lista para publicar.
<h1>Cerámica por encargo</h1>
<h2>Qué puedes encargar</h2>
<h3>Vajilla</h3>
<p>Formatos y acabados disponibles.</p>
<h3>Piezas decorativas</h3>
<p>Opciones para espacios y colecciones.</p>
<h2>Cómo preparar tu consulta</h2>
<p>Medidas, referencias y fecha deseada.</p>Al pasar de las piezas decorativas a la preparación de la consulta, se vuelve a H2 porque empieza otro apartado principal.
Como norma de organización, evita saltos que abran subapartados sin su contexto. Volver de un nivel profundo a otro superior sí puede tener sentido cuando se cierra una sección.
Revisar también lo que añade la plantilla
En un CMS, parte de la estructura puede venir de la plantilla. Si esta ya muestra el título principal de la entrada, repetirlo dentro del cuerpo puede duplicar la información.
Antes de añadir otro título, revisa la página publicada y el elemento que lo genera. Un ajuste en el editor no demuestra por sí solo qué se ha renderizado.
Piensa también en navegación, pie y bloques relacionados. La revisión del artículo debe distinguir su estructura de la de otras regiones de la página. No borres encabezados ajenos al contenido solo para obtener un listado más corto.
Mini tutorial: leer el índice sin el diseño
Escribe únicamente los encabezados de una página, en su orden y con sangrías según el nivel. Después léelos sin imágenes ni párrafos.
Comprueba tres cuestiones:
- ¿Se reconoce el asunto principal?
- ¿Cada subapartado pertenece al grupo que lo contiene?
- ¿Hay títulos repetidos o demasiado vagos para orientar?
Vuelve a la página y contrasta ese esquema con el HTML real. Usa el inspector del navegador o una herramienta de revisión que muestre los encabezados; no deduzcas el nivel por el tamaño visual.
Pedir una revisión concreta a la IA
Puedes proporcionarle el listado y preguntar qué relaciones resultan ambiguas. Solicita que conserve el contenido y explique cada propuesta de cambio.
Después comprueba el resultado publicado. Para situar esta revisión dentro de una decisión más amplia, consulta la arquitectura de información y las bases de HTML y CSS.
Una estructura clara permite leer la página de distintas maneras y ayuda a que cada apartado ocupe el lugar que le corresponde.
