Herramientas HTML

Gratis Comprobador de jerarquia HTML

Pega HTML y visualiza el árbol de encabezados. Encuentra niveles saltados y h1 faltantes.

Cargando herramienta...

Qué es Comprobador de jerarquia HTML?

La jerarquía de encabezados (h1 a h6) es la columna vertebral estructural de cualquier documento HTML. Los lectores de pantalla dependen de un orden lógico de encabezados para permitir a los usuarios navegar saltando entre secciones. Saltar niveles, como pasar de h1 a h3, o usar múltiples h1 en una página, puede confundir tanto a la tecnología de asistencia como a los rastreadores.

Respuesta rápida

Pegue su HTML para ver la estructura de encabezados como un árbol visual e identificar niveles saltados, etiquetas h1 faltantes y otros problemas de jerarquía que afectan la accesibilidad y el SEO.

Last updated: 2026-06-11

Limitaciones

  • La herramienta solo escanea etiquetas de encabezado en el HTML pegado. No lee contenido generado por CSS ni encabezados inyectados por JavaScript.
  • El validador solo verifica nombres de elementos. No evalúa atributos aria-level o role.
  • Pegar HTML parcial puede mostrar un árbol incompleto. Pegue el contenido completo de la página.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Pegue su marcado HTML en el área de texto. La herramienta extraerá todas las etiquetas de encabezado h1 a h6.
  2. Revise el árbol de encabezados generado. Cada encabezado aparece en su profundidad correcta.
  3. Busque niveles saltados, etiquetas h1 duplicadas o encabezados fuera de orden lógico.
  4. Ajuste su HTML para corregir cualquier problema estructural, luego pegue nuevamente para confirmar.

Para qué puedes usarla

  • Auditar una plantilla de entrada de blog antes de publicar para asegurar una navegación correcta del lector de pantalla.
  • Verificar la estructura de encabezados de una página estática para niveles saltados que podrían confundir a los rastreadores.
  • Confirmar que los encabezados de sección dentro de los artículos desciendan lógicamente de h1 a h2 y h3 sin saltos.

Casos de uso

Ejemplos prácticos

Ejemplo

Artículo bien estructurado

Una entrada de blog usa h1 para el título de la página, h2 para secciones principales como Introducción y Conclusión, y h3 para subsecciones. El árbol muestra un descenso limpio de un nivel a la vez.

Ejemplo

Orden de encabezados problemático

Una página comienza con un título h1, luego salta directamente a un h3 para la primera sección, omitiendo h2 por completo. El árbol resalta el salto.

Errores comunes

  • Usar encabezados para tamaño visual en lugar de significado estructural, lo que rompe la navegación del lector de pantalla.
  • Saltar de h2 a h4, creando un vacío que dificulta la interpretación del rastreador.
  • Omitir la etiqueta h1 por completo en una página.

Verificación

  1. Compare el árbol de encabezados con el diseño visual de la página para confirmar que cada sección visible tenga un encabezado correspondiente.
  2. Pruebe la página con un lector de pantalla para verificar que la jerarquía funcione para usuarios de tecnología de asistencia.

FAQ

Preguntas sobre Comprobador de jerarquia HTML

¿Cuántas etiquetas h1 debe tener una página?

Una etiqueta h1 por página es la recomendación estándar. El h1 debe describir el tema general de la página.

¿Está bien saltar niveles de encabezado por razones de estilo?

No. Los encabezados deben reflejar la estructura del documento, no la apariencia visual. Use CSS para estilizar los encabezados de manera diferente.

¿La jerarquía de encabezados afecta el SEO?

Sí. Los buscadores usan la estructura de encabezados para entender los temas de la página y su importancia relativa.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también