Herramientas HTML

Gratis Generador de indice con anclas

Pega HTML con encabezados y obten un indice anidado con enlaces de anclaje.

Cargando herramienta...

Qué es Generador de indice con anclas?

Una tabla de contenidos es una lista enlazada de encabezados que permite a los lectores saltar a secciones dentro de una página larga. Los enlaces de anclaje usan el atributo id en cada encabezado para crear URL con enlace profundo. Para sitios estáticos con artículos largos, un TOC mejora la navegación, la accesibilidad y la participación del lector al permitir a los usuarios previsualizar la estructura del artículo.

Respuesta rápida

Genere una tabla de contenidos anidada con enlaces de anclaje a partir de etiquetas de encabezado en su HTML. Cada entrada del TOC enlaza a un id simplificado en el encabezado correspondiente para facilitar la navegación por la página.

Last updated: 2026-06-11

Limitaciones

  • La herramienta genera el marcado del TOC y los valores id de los encabezados por separado. Debe agregar manualmente los atributos id generados a las etiquetas de encabezado en su HTML para que los enlaces de anclaje funcionen.
  • Los encabezados sin contenido de texto o los encabezados anidados dentro de contenedores no semánticos pueden no ser extraídos correctamente por el analizador.
  • El TOC generado usa anidamiento plano basado en niveles de encabezado. Puede necesitar CSS personalizado para el estilo de sangría multinivel.

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

Cómo usar esta herramienta

  1. Pegue el HTML de su artículo o contenido de página en el área de entrada.
  2. Seleccione qué niveles de encabezado incluir en el TOC, como h2 hasta h4.
  3. Revise la lista anidada generada y haga clic en un enlace para verificar el formato del anclaje.
  4. Copie el HTML del TOC y péguelo al inicio de su artículo, luego agregue los atributos id a sus encabezados.

Para qué puedes usarla

  • Agregar una tabla de contenidos a una guía larga con 12 o más secciones.
  • Crear enlaces de anclaje para una página de documentación con una jerarquía profunda de h2 y h3.
  • Generar enlaces de salto a sección para una página de aterrizaje con múltiples secciones.

Casos de uso

Ejemplos prácticos

Ejemplo

Guía larga con 12 secciones

Una guía de publicación sobre configuración de sitios estáticos cubre instalación, configuración, despliegue y solución de problemas. El TOC lista cada sección h2 con un enlace de anclaje para que los lectores puedan saltar directamente al paso relevante.

Ejemplo

Documentación con jerarquía h2/h3

Una referencia de API usa h2 para grupos de endpoints y h3 para endpoints individuales. El generador de TOC preserva el anidamiento para que los lectores vean la relación padre-hijo en la barra lateral.

Errores comunes

  • Generar un TOC con enlaces de anclaje pero no agregar los atributos id correspondientes a los encabezados originales, lo que hace que los enlaces no funcionen.
  • Intentar generar un TOC a partir de contenido pegado que no contiene etiquetas de encabezado, lo que produce una lista vacía.
  • Generar un TOC con niveles de encabezado inconsistentes como saltar de h2 a h4 sin h3, lo que rompe el anidamiento visual.

Verificación

  1. Haga clic en cada enlace del TOC y confirme que la página se desplace a la sección de encabezado correcta sin errores.
  2. Verifique la URL de la página después de hacer clic en un enlace del TOC para confirmar que el fragmento de anclaje aparezca correctamente en la barra de direcciones.

FAQ

Preguntas sobre Generador de indice con anclas

¿Agrega esta herramienta atributos id a mis encabezados existentes?

Genera los valores id como parte de los enlaces del TOC. Debe agregar esos atributos id a las etiquetas de encabezado correspondientes en su HTML manualmente o a través del generador de su sitio.

¿Debería toda página tener una tabla de contenidos?

Solo las páginas con suficiente contenido para justificar la navegación se benefician de un TOC. Una página con menos de tres o cuatro encabezados generalmente no necesita uno.

¿Qué niveles de encabezado debería incluir el TOC?

Incluya h2 hasta h3 o h2 hasta h4 para la mayoría de los artículos. Empiece desde h2 porque el h1 suele ser el título de la página. Incluir demasiados niveles como h5 y h6 hace que el TOC esté desordenado.

¿Cómo manejo texto de encabezado duplicado al generar anclajes TOC?

Si dos o más encabezados tienen texto idéntico, los IDs de anclaje generados deben ser únicos. Agregue un sufijo numérico a los duplicados: #introduccion, #introduccion-2, #introduccion-3. Esta herramienta genera anclajes únicos agregando un contador a los IDs duplicados. Al escribir contenido, evite texto de encabezado idéntico cuando sea posible para mantener los enlaces TOC significativos y predecibles.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también