Técnica HTML WCAG 2.2
H42Marcar los títulos y subtítulos con encabezados h1 a h6
Nombre oficial en el W3C: Usar h1-h6 para identificar los encabezados
En pocas palabras
Los títulos y subtítulos de una página deben marcarse con los elementos h1 a h6. El número indica su nivel: h1 para el título principal, h2 para las secciones, h3 para sus apartados. El nivel se elige por la estructura del contenido, no por el tamaño de letra.
Por qué es importante
Quien ve la página la recorre de un vistazo gracias a los títulos. Las personas ciegas hacen lo mismo con el lector de pantalla (programa que lee en voz alta lo que hay en la pantalla). Abren la lista de encabezados y saltan al que les interesa.
- Si un título es solo texto en negrita, no aparece en esa lista.
- Si los niveles están desordenados, la persona no entiende qué apartado depende de cuál.
- Si se marca como encabezado algo que no lo es, la lista se llena de ruido.
Cómo se hace
- Marque el título principal del contenido con un
<h1>. - Use
<h2>para las secciones y<h3>para los apartados de cada sección, y así sucesivamente. - Elija el nivel por la jerarquía. Si quiere un título más grande o más pequeño, cámbielo con CSS.
- No use encabezados para dar tamaño a textos que no son títulos, como un eslogan o un precio.
- Revise los bloques de plantilla y del maquetador visual: a menudo fijan niveles que no encajan.
Ejemplo práctico
En la página de un trámite municipal, los encabezados h1 a h6 deben seguir la jerarquía del contenido. El error típico es elegir el nivel por el tamaño de letra que trae cada etiqueta.
Así no: Niveles elegidos por el tamaño de letra
«Requisitos» y «Cómo solicitarla» son h5 porque se querían pequeños. «Plazo de presentación» es un apartado de «Cómo solicitarla», pero es h3 porque se quería más grande. La lista de encabezados del lector de pantalla muestra una jerarquía que no corresponde al contenido.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<h1>Ayudas al alquiler para jóvenes 2026</h1>
<p>Ayuda mensual de hasta 250 € para personas de 18 a 35 años.</p>
<h5>Requisitos</h5>
<ul>
<li>Estar empadronado en el municipio.</li>
<li>Ingresos inferiores a 3 veces el IPREM.</li>
</ul>
<h5>Cómo solicitarla</h5>
<p>Presente la solicitud en la sede electrónica o en el Registro General.</p>
<h3>Plazo de presentación</h3>
<p>Del 1 al 30 de noviembre de 2026.</p>Así sí: Niveles según la jerarquía y tamaño con CSS
El nivel de cada encabezado indica su lugar en la estructura: h1 para el título, h2 para las secciones y h3 para el apartado. El tamaño se ajusta con CSS, sin cambiar el nivel.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
</style>
<h1>Ayudas al alquiler para jóvenes 2026</h1>
<p>Ayuda mensual de hasta 250 € para personas de 18 a 35 años.</p>
<h2>Requisitos</h2>
<ul>
<li>Estar empadronado en el municipio.</li>
<li>Ingresos inferiores a 3 veces el IPREM.</li>
</ul>
<h2>Cómo solicitarla</h2>
<p>Presente la solicitud en la sede electrónica o en el Registro General.</p>
<h3>Plazo de presentación</h3>
<p>Del 1 al 30 de noviembre de 2026.</p>Cómo comprobarlo
Errores frecuentes en auditorías
- Elegir h4 o h5 para que el título salga pequeño, en vez de ajustar el tamaño con CSS.
- Marcar el logotipo como h1 en todas las páginas y dejar el título real del contenido en h2.
- Widgets de la barra lateral y del pie con h2-h4 que desordenan la lista de encabezados.
- Saltos de nivel porque cada bloque del maquetador visual fija su propia etiqueta.
Para saber más, en nuestro blog
-
Accesibilidad web y posicionamiento SEO¿Se está convirtiendo la accesibilidad en algo cada vez más importante para el posicionamiento web (SEO)?
-
Guía para crear correos electrónicos accesiblesEste artículo explica como hacer un correo electrónico más accesible e inclusivo para todo tipo de personas y como beneficia a todos el hacerlo.
-
Introducción a la accesibilidad webLa accesibilidad web trata de crear contenido web y diseños que puedan ser utilizadas por todos, independientemente de su habilidad.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H42 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
HTML
Descripción
El objetivo de esta técnica es usar el marcado de encabezados de HTML para proporcionar código semántico a los encabezados del contenido. El marcado de encabezados permite a las tecnologías de asistencia presentar al usuario la condición de encabezado de un texto. Un lector de pantalla puede reconocer el código y anunciar el texto como un encabezado con su nivel, emitir un pitido o proporcionar algún otro indicador sonoro. Los lectores de pantalla también pueden navegar por el marcado de encabezados, lo que puede ser una forma eficaz de que sus usuarios encuentren más rápidamente el contenido que les interesa. Las tecnologías de asistencia que modifican la presentación visual creada por el autor también podrán ofrecer una presentación visual alternativa adecuada para los encabezados que puedan identificarse mediante el marcado de encabezados.
Ejemplos
Organización jerárquica de los encabezados
En el siguiente ejemplo, los encabezados se usan en una disposición jerárquica, con h3 como subsección de h2, que a su vez es una subsección de h1.
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat ...</p>
<h2>Fruit</h2>
<p>A fruit is a structure of a plant that contains its seeds ...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree ...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin ...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ...</p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar group
of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
sweetness of their pods ...</p>Encabezados en una maquetación de tres columnas
En este ejemplo, el contenido principal de la página está en la columna central de una página de tres columnas. El título del contenido principal coincide con el título de la página y está marcado como h1, aunque no sea lo primero que aparece en la página. El contenido de la primera y la tercera columna es menos importante y está marcado con h2.
Es importante señalar que el código del ejemplo siguiente no pretende prescribir qué nivel de encabezado debe usarse para una sección concreta de la página web. En el ejemplo, la maquetación podría presentarse con el primer encabezado de cada columna en el mismo nivel lógico (por ejemplo, un h1) o, como ocurre en el ejemplo, con un nivel lógico que refleja su importancia con respecto al contenido principal.
<!doctype html>
<html lang="en">
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<nav class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</nav>
<!-- main contents -->
<main class="main">
<h1>Stock Market up today</h1>
<!-- content here -->
</main>
<!-- right panel -->
<aside class="side-bar">
<h2>Related links</h2>
<!-- content here -->
</aside>
</body>
</html>Pruebas
Procedimiento
- Comprobar que se usa marcado de encabezado cuando el contenido es un encabezado y que dicho marcado indica el nivel de encabezado adecuado para el contenido.
- Comprobar que no se usa marcado de encabezado cuando el contenido no es un encabezado.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
-
HTML: los elementos
h1,h2,h3,h4,h5yh6. -
MDN
<h1>-<h6>: The HTML Section Heading elements (los elementos de encabezado de sección de HTML). - Nomensa: How to structure headings for web accessibility (web.archive.org) (cómo estructurar los encabezados para la accesibilidad web).
- WebAIM: Semantic Structure: Regions, Headings, and Lists (estructura semántica: regiones, encabezados y listas).
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H42 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.