Generatore di indice dei contenuti per HTML e Markdown | We.Inc
Incolla un articolo in HTML o Markdown e ottieni un indice dei contenuti annidato con link ad ancora, id aggiunti ai titoli e CSS per una sidebar sticky. Nel tuo browser.
Generatore di indice dei contenuti
Questo generatore legge i titoli del tuo articolo, assegna a ciascuno un id univoco e costruisce un elenco annidato di link interni che puntano a essi. Incolla HTML o Markdown, scegli quali livelli di titolo includere e copia un blocco nav pronto, un elenco Markdown o il tuo HTML con gli id delle ancore già aggiunti.
Cosa incolli e cosa ottieni
Input
Titoli letti da
Output
HTML
Elementi da <h1> a <h6>
HTML della nav, elenco Markdown, articolo con id aggiunti
Markdown
Righe che iniziano con da # a ######
HTML della nav, elenco Markdown
Id esistenti
id="..." o {#custom-id}
Mantenuti così come sono
Titoli ripetuti
Stesso testo due volte
Il secondo id riceve -1, poi -2
Le guide lunghe sono più facili da scorrere e condividere quando chi legge può saltare a una sezione. I link danno anche a ogni parte della pagina un proprio indirizzo, così puoi mandare qualcuno direttamente al paragrafo che gli serve.
Come vengono creati gli id delle ancore
Il testo di ogni titolo viene messo in minuscolo, la punteggiatura viene eliminata e gli spazi diventano trattini, così Choose a layout diventa choose-a-layout. Le lettere accentate e gli alfabeti non latini vengono mantenuti, non rimossi.
Un id deve essere univoco nel documento e non deve contenere spazi. Quando lo stesso testo di titolo compare due volte, alla seconda copia viene aggiunto -1, alla terza -2, così ogni link ha esattamente una destinazione.
Le piattaforme Markdown creano i propri id per i titoli, e le loro regole differiscono leggermente. Se pubblichi Markdown in un posto che aggiunge già gli id, controlla un link dopo la pubblicazione; per l'HTML che gestisci tu, usa l'output dell'articolo così gli id coincidono esattamente.
Dove posizionare il blocco dei contenuti
Metti l'indice dopo l'introduzione, non sopra, così chi legge capisce prima di cosa parla la pagina. Sugli schermi larghi una sidebar sticky lo tiene a portata di mano durante lo scroll.
Se il tuo sito ha un header fisso, un link interno nasconderà il titolo sotto di esso. La proprietà scroll-margin-top aggiunge spazio sopra la destinazione quando il browser ci scorre, e risolve il problema senza JavaScript.
Incolla il tuo articolo. Lo strumento riconosce l'HTML quando vede tag di titolo; altrimenti legge i titoli Markdown e salta i blocchi di codice delimitati.
Scegli il livello di titolo più alto e quello più basso da includere. La maggior parte degli articoli elenca solo H2 e H3.
Scegli un elenco puntato o numerato e imposta l'etichetta che gli screen reader annunciano per la nav.
Copia il blocco dei contenuti. Per un input HTML, copia anche l'articolo con gli id, così ogni link ha la sua destinazione.
Scrivi titoli brevi e specifici; diventano sia il testo del link sia l'ancora nella barra degli indirizzi.
Evita di saltare livelli (un H4 subito sotto un H2). Lo strumento lo annida comunque, ma chi usa uno screen reader naviga per livello di titolo.
Cambiare un titolo cambia il suo id, e questo rompe i link che le persone hanno condiviso. Imposta un id fisso se una sezione è linkata da altre pagine.
Non mettere l'H1 della pagina nell'indice; chi legge è già in cima.
Domande frequenti
Come creo un indice dei contenuti cliccabile in HTML?
Assegna un id a ogni titolo, poi collegalo con un cancelletto: <a href="#set-a-budget">Set a budget</a> porta all'elemento con id="set-a-budget". Racchiudi i link in un elemento nav con un elenco all'interno. Questo strumento scrive sia gli id sia l'elenco.
Perché il mio link interno finisce dietro l'header?
Un header fisso o sticky copre la parte alta della finestra, e il browser porta il titolo proprio su quel bordo superiore. Aggiungi scroll-margin-top ai titoli, un po' più grande dell'altezza dell'header, e il titolo si fermerà sotto di esso.
Posso rendere sticky l'indice dei contenuti?
Sì. Metti la nav in una colonna laterale e assegnale position: sticky con un valore top. Scorre normalmente finché non raggiunge quell'offset, poi resta ferma mentre la sua colonna è sullo schermo. L'esempio qui sotto mostra il CSS.
Un indice dei contenuti aiuta la SEO?
Aiuta chi legge a trovare le sezioni e dà a ogni sezione un indirizzo linkabile. I motori di ricerca a volte mostrano link diretti alle sezioni, ma decidono loro quando; nessuna impostazione lo garantisce.
Sidebar sticky con i contenuti
Un layout a due colonne in cui l'indice resta visibile e i titoli non finiscono sotto un header fisso.
Nav sticky più offset dei titoli
Il riquadro è basso, quindi scorri al suo interno: la colonna dei contenuti resta fissa mentre l'articolo si muove.
Genera un indice dei contenuti
Incolla un articolo in HTML o Markdown. I titoli vengono letti, ricevono id di ancora univoci, vengono annidati per livello e trasformati in una nav HTML, un elenco Markdown e, per un input HTML, una copia del tuo articolo con gli id mancanti aggiunti.
Indice
Articolo (HTML o Markdown)
Dal livello
Al livello
Etichetta della nav
Stile dell'elenco
Puntato
Numerato
Letto come {format}: {n} titolo trovato, {m} nell'intervallo.
Letto come {format}: {n} titoli trovati, {m} nell'intervallo.
Nessun titolo in quell'intervallo. Amplia i livelli o verifica che i titoli inizino con # o usino i tag h.