Generador de Tabla de Contenidos desde Texto (TOC con Anclajes)
Crea una tabla de contenidos con enlaces de anclaje a partir de un texto Markdown o HTML. La herramienta lee el esquema de encabezados, compone una lista anidada, genera los slugs según el destino (GitHub, GitLab o simple) y resuelve las colisiones de anclajes duplicados. Puedes elegir Markdown, HTML <nav>, numeración jerárquica y un índice plegable.
- 📚 Resumen rápido: ¿cómo genero una tabla de contenidos?
- Qué es una tabla de contenidos y por qué añadirla
- Cómo funciona: del encabezado al enlace
- Estilos de anclaje
- Formatos de salida
- Ejemplo
- Dónde colocar la tabla de contenidos
- Casos de uso
- Herramientas relacionadas en porcentaje.net
- Preguntas Frecuentes (FAQ)
📚 Resumen rápido: ¿cómo genero una tabla de contenidos?
Pega el documento Markdown o HTML, elige el formato del índice y el rango de niveles (por defecto, de H2 a H3), y copia el resultado justo debajo del título del documento. Si en cambio solo quieres listar o auditar los encabezados, usa el extractor de encabezados de texto Markdown.
Qué es una tabla de contenidos y por qué añadirla
Una tabla de contenidos (TOC, del inglés table of contents) es una lista de las secciones de un documento, normalmente al principio, con un enlace que salta a cada una. En un artículo largo, un README o una página de documentación cumple varias funciones:
- Orientación: el lector ve de un vistazo de qué trata el documento y cuánto ocupa cada parte.
- Navegación: se salta directamente a la sección que interesa sin desplazarse.
- SEO: Bing y Google pueden mostrar esos enlaces de anclaje como sitelinks dentro del resultado de búsqueda, y la estructura clara ayuda a posicionar cada sección.
- Mantenimiento: obliga a revisar que la jerarquía de encabezados tenga sentido.
Cómo funciona: del encabezado al enlace
La herramienta realiza estos pasos:
- Extrae los encabezados del texto, reconociendo la sintaxis ATX (
#), Setext (===/---) y las etiquetas HTML<h1>–<h6>. - Filtra por nivel: normalmente no se incluyen ni el
H1(que es el título del documento) ni los niveles muy profundos. - Genera el slug de cada encabezado: el identificador que lo convierte en un destino enlazable (
#instalacion). - Desambigua los duplicados: si dos secciones se llaman igual, la segunda recibe el slug con sufijo
-1, la tercera-2, etc. - Compone la lista anidada en el formato elegido, con la sangría o el anidamiento que corresponda al nivel.
Estilos de anclaje
El anclaje debe coincidir con el que genera la plataforma donde se publica el documento, o el enlace no llevará a ningún sitio:
| Encabezado | GitHub | GitLab | Simple |
|---|---|---|---|
| Configuración avanzada | #configuración-avanzada | #configuracion-avanzada | #configuracion-avanzada |
| Paso 1: instalar | #paso-1-instalar | #paso-1-instalar | #paso-1-instalar |
Formatos de salida
- Markdown (lista con enlaces):
- [Sección](#seccion), con sangría de dos espacios por nivel. El formato universal paraREADME, wikis y blogs. - HTML
<nav>con<ul>: una lista anidada semántica dentro de un<nav aria-label="Tabla de contenidos">, lista para insertar en una página. - HTML
<ul>simple: la misma lista sin el contenedor<nav>. - Texto con sangría: sin enlaces, solo la estructura, para un documento en texto plano o un correo.
Además puedes numerar el índice como lista ordenada (1., 2.) o con numeración jerárquica (1, 1.1, 1.2), y envolverlo en un bloque <details> para conseguir el índice plegable típico de los README de GitHub.
Ejemplo
Entrada:
# Mi Proyecto ## Instalación ## Configuración ### Variables de entorno ### Archivo de configuración ## Uso
Salida (Markdown, sin el H1):
- [Instalación](#instalación) - [Configuración](#configuración) - [Variables de entorno](#variables-de-entorno) - [Archivo de configuración](#archivo-de-configuración) - [Uso](#uso)
Dónde colocar la tabla de contenidos
Lo habitual es ponerla justo después del título y de un párrafo introductorio breve, antes de la primera sección. En Markdown, si usas el índice plegable, queda discreto y no ocupa espacio hasta que el lector lo despliega. En un artículo web, muchos sitios la muestran flotando en un lateral con posición fija.
Recuerda que, si más adelante cambias el texto de un encabezado, tendrás que regenerar la tabla de contenidos, porque el slug cambiará y el enlace antiguo dejará de funcionar.
Casos de uso
- Proyectos de código: añadir un índice navegable a un
README.mdlargo. - Documentación: generar el TOC de cada página de una wiki o de un manual.
- Blogs y artículos: insertar una tabla de contenidos con anclajes al principio de un post extenso para mejorar la experiencia de lectura y el SEO.
- Informes y trabajos académicos en Markdown que luego se exportan a PDF o Word.
- Notas personales en Obsidian, Notion o similares.
Herramientas relacionadas en porcentaje.net
- Extractor de Encabezados de Texto Markdown: lista y audita la jerarquía de encabezados.
- Extractor de Metadatos de Texto: front matter, esquema y entidades del documento.
- Agrupador de Líneas de Texto: organiza listas largas por bloques o por letra.
- Generador de Separadores ASCII: cabeceras de sección para tu documento.
- Contador de Palabras: mide la extensión de cada sección.
Preguntas Frecuentes (FAQ)
¿Qué estilo de anclaje debo elegir?
El de la plataforma donde vayas a publicar el documento. Si es un README o un archivo Markdown de GitHub, elige «GitHub». Para GitLab, «GitLab». Si el destino es un sitio propio o no lo sabes, «Simple» genera slugs sin acentos que funcionan en casi cualquier renderizador. Un anclaje que no coincide con el que genera la plataforma hará que el enlace del índice no salte a ningún sitio.
¿Cómo maneja dos secciones con el mismo título?
Igual que GitHub: la primera aparición conserva el slug base (#uso) y las siguientes reciben un sufijo numérico (#uso-1, #uso-2). Así cada entrada del índice enlaza con la sección correcta. La herramienta te indica en las estadísticas cuántos anclajes duplicados ha tenido que desambiguar.
¿Qué es el TOC plegable?
Es una tabla de contenidos envuelta en las etiquetas <details> y <summary> de HTML, que GitHub y muchos renderizadores de Markdown muestran como una sección desplegable. El lector ve solo el texto «Tabla de contenidos» y la abre si la necesita, de modo que no ocupa espacio al principio del documento.
¿Por qué se omite el H1 por defecto?
Porque el H1 es el título del propio documento, y no tiene sentido que una tabla de contenidos se incluya a sí misma o incluya el título bajo el que está. Por eso el rango de niveles predeterminado empieza en H2. Si tu documento usa H1 para las secciones, cambia el nivel mínimo a 1 y desactiva la opción de omitir el título.
¿Se procesa el documento en mi navegador?
Sí. Toda la generación de la tabla de contenidos ocurre localmente en tu navegador con JavaScript. El texto no se envía a ningún servidor ni se almacena, por lo que puedes generar índices de documentación interna o de borradores sin ninguna preocupación de privacidad.