Comprobador de estructura de encabezados: esquema H1 a H6 desde HTML | We.Inc
Pega HTML y ve su esquema de H1 a H6 como un árbol, con los niveles saltados, los H1 ausentes o repetidos y los encabezados vacíos marcados. Funciona en tu navegador; no se sube nada.
Comprobador de estructura de encabezados
Pega el HTML de una página y este comprobador dibuja su esquema de encabezados como un árbol con sangría, de h1 a h6, incluidos los elementos con role="heading". Marca los niveles saltados, como un h2 seguido de un h4, un h1 ausente o repetido y los encabezados vacíos. El análisis se hace en tu navegador, así que el código nunca sale de tu dispositivo.
Qué marca el comprobador
Comprobación
Ejemplo
Por qué importa
Nivel saltado
h2 seguido directamente de h4
Quien usa lector de pantalla pierde la noción de dónde está
Sin h1
La página empieza en h2
La página no tiene encabezado principal
Más de un h1
Logo y título, ambos h1
Un solo h1 debería nombrar la página
Encabezado vacío
<h3></h3> o solo un icono
Se anuncia sin nada que decir
El primer encabezado no es h1
h3 antes del h1
El esquema empieza por la mitad
Los encabezados son la forma en que quienes usan lectores de pantalla recorren una página, y dan a los buscadores la forma de tu contenido. Pega abajo el HTML de una página o de un componente, desde el código fuente o tu editor, y aparecerá el esquema con cada problema marcado en la línea donde ocurre.
Copia el HTML de tu página, por ejemplo desde ver código fuente, y pégalo en el cuadro. O carga el ejemplo para ver las comprobaciones.
El comprobador lee cada h1 a h6 y cada elemento con role="heading" en el orden del documento.
Lee el árbol: la sangría sigue el nivel y los avisos aparecen junto al encabezado que los causó.
Corrige el marcado, vuelve a pegarlo y copia el esquema limpio como texto plano si lo quieres para un briefing.
Usa los niveles de encabezado para la estructura y CSS para el tamaño. Si un h2 se ve demasiado grande en una tarjeta, cámbiale el estilo en lugar de sustituirlo por un h4.
Volver a subir varios niveles está bien: un h4 puede ir seguido de un h2 cuando empieza una sección nueva.
Un logo rara vez es el h1 adecuado. Da el h1 al título que nombra esta página.
En las single-page apps, pega el HTML renderizado, copiado desde el inspector de elementos del navegador, porque ver código fuente puede mostrar una estructura vacía.
El texto oculto con CSS también cuenta aquí, ya que el comprobador lee el marcado y no aplica tu hoja de estilos.
Preguntas frecuentes
¿Está mal saltarse niveles de encabezado?
El tutorial de encabezados del W3C dice que saltarse rangos puede confundir y que conviene evitarlo cuando sea posible, por ejemplo un h2 seguido directamente de un h4. Cerrar una sección y volver a subir, como de h4 a h2, es normal.
¿Puede una página tener más de un h1?
HTML lo permite, pero MDN recomienda un único h1 que describa el contenido de la página. La vieja idea de que cada sección podía volver a empezar en h1 dependía de un algoritmo de esquema del documento que los navegadores no usan, así que esta herramienta avisa cuando hay un segundo h1.
¿Por qué no puedo introducir simplemente una URL?
Esta es una página estática que funciona en tu navegador, y los navegadores impiden que un sitio lea el HTML de otro. Pegar el código mantiene la herramienta honesta y privada: no se envía nada a ningún sitio.
¿Entiende role="heading"?
Sí. Un elemento con role="heading" se lee con su aria-level. Si falta aria-level, los navegadores usan el nivel 2, así que el comprobador lo trata como un h2 y marca el atributo que falta.
¿Los encabezados afectan al SEO?
Los encabezados describen la estructura de tu contenido a cualquier lector, incluidos los buscadores. No prometemos nada sobre posiciones; un esquema claro merece la pena, ante todo, para las personas.
Cómo leer el esquema
Cada fila es un encabezado, con la sangría de su nivel. Un esquema sano se lee como un índice: un título, unas pocas secciones h2 y subsecciones h3 debajo donde haga falta.
Los avisos señalan el encabezado donde se produjo el salto, no el anterior. Corrígelos de arriba abajo, porque un nivel equivocado al principio puede hacer que todo lo de debajo parezca raro.
Causas habituales
La mayoría de los niveles saltados vienen de elegir un encabezado por su tamaño por defecto. Las plantillas y los creadores de páginas lo hacen a menudo en pies de página y tarjetas. Otros vienen de componentes reutilizados en páginas con otra estructura, y por eso conviene que el nivel de encabezado de un componente sea configurable.
Los encabezados vacíos suelen envolver un icono o una imagen sin texto alternativo. Pon texto alternativo a la imagen, añade texto visible o deja de usar un encabezado para eso.
Niveles de encabezado de un vistazo
Cómo se suelen usar los seis niveles en una página web
Nivel
Uso típico
El título de la página, una sola vez
Secciones principales de la página
Subsecciones dentro de un h2
Detalle dentro de un h3, como los elementos de una lista de funciones
Poco frecuente; documentación extensa y textos legales
Cómo arreglar un esquema roto
Antes: niveles elegidos por su tamaño
Los títulos de las tarjetas saltan de h2 a h4 porque h4 parecía tener el tamaño adecuado.
Después: el nivel correcto, con otro estilo en CSS
Las tarjetas usan h3, el siguiente nivel, y una clase los mantiene pequeños.
Comprueba tus encabezados
Pega el HTML abajo. Se lee en tu navegador y nunca se sube.
HTML a comprobar
Cargar ejemplo
Borrar
Esquema
{n} encabezados, {w} avisos
No se encontraron encabezados. Pega el HTML de una página para ver su esquema.