Generador de tabla de contenidos para HTML y Markdown | We.Inc
Pega un artículo en HTML o Markdown y obtén una tabla de contenidos anidada con enlaces de ancla, ids añadidos a tus títulos y CSS para una barra lateral fija. En tu navegador.
Generador de tabla de contenidos
Este generador lee los títulos de tu artículo, le da a cada uno un id único y construye una lista anidada de enlaces que apuntan a ellos. Pega HTML o Markdown, elige qué niveles de título incluir y copia un bloque nav listo, una lista en Markdown o tu HTML con los ids de ancla ya añadidos.
Lo que pegas y lo que obtienes
Entrada
Títulos leídos de
Resultados
HTML
Elementos <h1> a <h6>
HTML del nav, lista en Markdown, artículo con ids añadidos
Markdown
Líneas que empiezan por # a ######
HTML del nav, lista en Markdown
Ids existentes
id="..." o {#custom-id}
Se conservan tal cual
Títulos repetidos
El mismo texto dos veces
El segundo id recibe -1, luego -2
Las guías largas son más fáciles de recorrer y compartir cuando los lectores pueden saltar a una sección. Los enlaces también dan a cada parte de la página su propia dirección, así que puedes enviar a alguien directamente al párrafo que necesita.
Cómo se crean los ids de ancla
El texto de cada título se pasa a minúsculas, se quitan los signos de puntuación y los espacios se convierten en guiones, así que Elige un diseño se convierte en elige-un-diseño. Las letras con acento y los alfabetos no latinos se conservan en lugar de eliminarse.
Un id debe ser único en el documento y no puede contener espacios. Cuando el mismo texto de título aparece dos veces, la segunda copia recibe -1, la tercera -2, de modo que cada enlace tiene exactamente un destino.
Las plataformas de Markdown crean sus propios ids de título, y sus reglas varían ligeramente. Si publicas Markdown en un sitio que ya añade ids, comprueba un enlace después de publicar; para el HTML que controlas tú, usa la salida del artículo para que los ids coincidan exactamente.
Dónde colocar el bloque de contenidos
Pon la lista de contenidos después de la introducción, no encima, para que los lectores sepan primero de qué trata la página. En pantallas anchas, una barra lateral fija la mantiene a mano mientras se desplazan.
Si tu sitio tiene un header fijo, un enlace de salto ocultará el título debajo de él. La propiedad scroll-margin-top añade espacio encima del destino cuando el navegador se desplaza hasta él, lo que lo soluciona sin JavaScript.
Pega tu artículo. La herramienta detecta HTML cuando ve etiquetas de título; si no, lee los títulos de Markdown y se salta los bloques de código delimitados.
Elige el nivel de título más alto y el más profundo que quieres incluir. La mayoría de los artículos solo listan H2 y H3.
Elige una lista con viñetas o numerada y define la etiqueta que anuncian los lectores de pantalla para el nav.
Copia el bloque de contenidos. Si la entrada es HTML, copia también el artículo con ids para que cada enlace tenga su destino.
Mantén los títulos cortos y concretos; se convierten tanto en el texto del enlace como en el ancla de la barra de direcciones.
Evita saltarte niveles (un H4 directamente debajo de un H2). La herramienta lo anida igualmente, pero quienes usan lectores de pantalla navegan por nivel de título.
Cambiar un título cambia su id, lo que rompe los enlaces que la gente ha compartido. Define un id fijo si una sección está enlazada desde otro sitio.
No pongas el H1 de la página en la lista de contenidos; el lector ya está arriba del todo.
Preguntas frecuentes
¿Cómo hago una tabla de contenidos clicable en HTML?
Dale un id a cada título y enlázalo con una almohadilla: <a href="#set-a-budget">Set a budget</a> salta al elemento con id="set-a-budget". Envuelve los enlaces en un elemento nav con una lista dentro. Esta herramienta escribe tanto los ids como la lista.
¿Por qué mi enlace de salto cae detrás del header?
Un header fixed o sticky cubre la parte superior de la ventana, y el navegador desplaza el título hasta ese borde superior. Añade scroll-margin-top a los títulos, un poco mayor que la altura del header, y el título se detendrá debajo de él.
¿Puedo hacer que la tabla de contenidos se quede fija?
Sí. Pon el nav en una columna lateral y dale position: sticky con un valor top. Se desplaza con normalidad hasta llegar a ese margen y luego se queda quieto mientras su columna está en pantalla. El ejemplo de abajo muestra el CSS.
¿Ayuda una tabla de contenidos al SEO?
Ayuda a los lectores a encontrar secciones y da a cada sección una dirección enlazable. Los buscadores a veces muestran enlaces de salto a secciones, pero son ellos quienes deciden cuándo; no hay ningún ajuste que lo garantice.
Barra lateral de contenidos fija
Una maquetación a dos columnas en la que los contenidos siguen a la vista y los títulos quedan libres de un header fijo.
Nav fijo y margen para los títulos
El marco es bajo, así que desplázate dentro de él: la columna de contenidos se queda fija mientras el artículo se mueve.
Genera una tabla de contenidos
Pega un artículo en HTML o Markdown. Se leen los títulos, se les asignan ids de ancla únicos, se anidan por nivel y se convierten en un nav en HTML, una lista en Markdown y, si la entrada es HTML, una copia de tu artículo con los ids que faltaban añadidos.
Contenidos
Artículo (HTML o Markdown)
Desde el nivel
Hasta el nivel
Etiqueta del nav
Estilo de lista
Viñetas
Números
Leído como {format}: {n} título encontrado, {m} dentro del rango.
Leído como {format}: {n} títulos encontrados, {m} dentro del rango.
No hay títulos en ese rango. Amplía los niveles o comprueba que los títulos empiezan por # o usan etiquetas h.