Corso HTML: come creare un indice

DiMarco Nisticò

PUBBLICATO IL 7 Gen 2019 ALLE 15:00 - AGGIORNATO IL 4 Gennaio 2019 ALLE 16:05

L’indice permette di organizzare i contenuti di un articolo in maniera più efficiente, permettendo agli utenti di trovare con un click la parte che gli interessa. Vediamo come strutturarlo in HTML.

Quando leggiamo un articolo, specie se lungo e articolato su più punti, è possibile che sia presente un indice all’inizio. Tale indice contiene dei collegamenti rapidi agli argomenti presenti nell’articolo stesso. Basterà infatti cliccare sul titolo dell’argomento per essere riportati immediatamente al paragrafo relativo. E’ uno strumento comodo soprattutto per chi deve leggere l’articolo, che non dovrà scorrere per tutta la pagina alla ricerca delle informazioni di cui ha bisogno ma gli basterà selezionare l’argomento dall’indice per poterlo leggere immediatamente. Per chi invece scrive articoli è un modo migliore per poter strutturare al meglio i contenuti, che sono ben visti dai motori di ricerca.

Come creare un indice in HTML

Per creare un indice ci avvarremo di un tag che abbiamo già visto precedentemente, ovvero il tag <a></a>che abbiamo trattato nella parte del corso relativa ai collegamenti ipertestuali. D’altronde l’indice altro non è che un elenco di link che, invece che far riferimento a contenuti esterni all’articolo, vanno a collegarsi a paragrafi dell’articolo esterno.

Vediamo quindi come creare un indice sfruttando proprio i collegamenti ipertestuali. Per prima cosa è consigliato creare una lista, ordinata o meno, degli argomenti che vengono trattati nell’articolo. Dunque utilizziamo la seguente sintassi:

<ul><li></li></ul>oppure <ol><li></li></ol>

Dove <ul><ol>rappresentano rispettivamente una lista non ordinata e una ordinata (numerata). Il tag <li>invece indica l’elemento di una lista. Quindi ogni elemento dovrà essere racchiuso da un proprio tag <li>. Una volta creata la lista, è il momento di aggiungere gli argomenti, che però dovranno puntare ai paragrafi relativi all’interno del testo. Dunque utilizziamo la struttura seguente:

<li><a href="#NomeParagrafo">Titolo argomento</a></li>

Come avete visto abbiamo creato un semplice collegamento ipertestuale, che invece che puntare ad un URL punta direttamente al paragrafo contrassegnato da NomeParagrafo. Ora bisogna creare il titolo del paragrafo corrispondente:

<h2><a name="NomeParagrafo">Titolo paragrafo</a></h2>

A questo punto una volta che avremo cliccato sull’elemento dell’indice, la pagina si sposterà direttamente al paragrafo corrispondente. Dovrete fare attenzione che il riferimento href dell’indice corrisponda esattamente al valore dell’attributo name del titolo del paragrafo, altrimenti non funzionerà. Ovviamente il titolo del paragrafo non deve essere necessariamente identico al suo valore identificativo. Potete scegliere una parola chiave che lo caratterizza e usare quella per creare il suo collegamento nell’indice.

Questo metodo è sicuramente il più immediato per creare un indice tramite HTML poiché richiede solamente l’uso del codice, senza installare alcun plugin esterno. Potrete inoltre personalizzare l’indice tramite il CSS, per distinguerlo dal resto dell’articolo.

Iniziate anche voi ad inserire l’indice nei vostri articoli, così da renderli più fruibili ai vostri lettori.

Di Marco Nisticò

Sviluppatore informatico, cerco sempre di stare al passo con i tempi in un mondo ormai circondato dalla tecnologia.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.