Introduzione
Quando si lavora con pagine HTML lunghe o con documenti strutturati in più sezioni, i collegamenti ipertestuali non servono solo a “saltare” da una parte all’altra della pagina. Un uso molto pratico e spesso sottovalutato è la gestione del ritorno alla sezione corretta dopo aver seguito un link interno o esterno.
Questo sotto-argomento è utile, concreto e molto frequente nei siti reali: pensa a una pagina FAQ, a un manuale tecnico, a un indice di capitoli o a una documentazione. L’utente clicca un link, legge il contenuto e poi vuole tornare esattamente al punto di partenza, senza perdere il contesto. In HTML, questo si ottiene combinando ancore interne, identificatori stabili e una struttura di navigazione ben pensata.
In questo tutorial vedremo come creare una pagina con sezioni collegate tra loro, come costruire un indice affidabile e come progettare link che permettano di tornare facilmente al punto giusto. L’obiettivo non è solo “far funzionare i link”, ma farli funzionare bene per chi legge e per chi mantiene il codice.
Codice completo
<nav aria-label="Indice del documento">
<ul>
<li><a href="#introduzione">Introduzione</a></li>
<li><a href="#configurazione">Configurazione</a></li>
<li><a href="#esempio">Esempio pratico</a></li>
<li><a href="#errori">Errori comuni</a></li>
<li><a href="#conclusione">Conclusione</a></li>
</ul>
</nav>
<h2 id="introduzione">Introduzione</h2>
<p>Questa pagina mostra come costruire collegamenti interni che permettono di tornare facilmente a una sezione specifica dopo aver consultato un approfondimento.</p>
<p><a href="#indice">Torna all’indice</a></p>
<h2 id="configurazione">Configurazione</h2>
<p>Per creare un punto di destinazione stabile, assegna un attributo id unico all’elemento della sezione.</p>
<ul>
<li>L’id deve essere unico nella pagina.</li>
<li>Meglio usare nomi descrittivi e leggibili.</li>
<li>Evita id generici come "section1" se il contenuto è destinato a crescere.</li>
</ul>
<p><a href="#indice">Torna all’indice</a></p>
<h2 id="esempio">Esempio pratico</h2>
<p>Immagina una documentazione tecnica con una sezione dedicata alle impostazioni. Dalla pagina principale puoi portare l’utente direttamente al paragrafo corretto e, alla fine della lettura, offrirgli un link di ritorno.</p>
<pre><code><p>
Per maggiori dettagli consulta la sezione
<a href="#errori">errori comuni</a>.
</p>
</code></pre>
<p><a href="#indice">Torna all’indice</a></p>
<h2 id="errori">Errori comuni</h2>
<ul>
<li>Usare id duplicati nella stessa pagina.</li>
<li>Cambiare il testo del link senza aggiornare il contesto della destinazione.</li>
<li>Creare sezioni troppo grandi, che rendono poco utile il ritorno all’ancora.</li>
<li>Dimenticare un link di ritorno dopo un approfondimento lungo.</li>
</ul>
<p><a href="#indice">Torna all’indice</a></p>
<h2 id="conclusione">Conclusione</h2>
<p>Un buon sistema di ancore interne non aiuta solo a navigare: migliora l’esperienza di lettura, riduce la frizione e rende i contenuti più professionali. Nei documenti lunghi, offrire sempre un ritorno chiaro alla sezione corretta è una piccola scelta che fa una grande differenza.</p>
<p><a href="#indice">Torna all’indice</a></p>
<h2 id="indice">Indice del documento</h2>
<p>Questa è l’ancora principale usata come punto di ritorno. Inserirla vicino all’inizio della pagina è una pratica molto utile per documenti estesi.</p>Spiegazione
Il cuore di questo approccio è semplice: ogni sezione importante riceve un attributo id, e i link interni usano href="#id" per raggiungere quel punto della pagina. La parte interessante, però, è la gestione del ritorno.
Nel codice abbiamo creato un indice iniziale con un elemento nav e una lista di collegamenti. Anche se qui ci concentriamo sugli elementi richiesti, il concetto è chiaro: l’indice è il punto di partenza e l’ancora #indice è il riferimento stabile a cui tornare dopo la consultazione di una sezione.
Ogni blocco principale ha un id univoco, ad esempio introduzione, configurazione, esempio, errori e conclusione. Questo permette di creare link come:
- #introduzione per aprire l’inizio del contenuto;
- #errori per saltare alla sezione con i problemi più comuni;
- #indice per tornare al punto di navigazione principale.
La logica è particolarmente utile quando una sezione contiene un approfondimento lungo o un esempio esteso. In questi casi, al termine del contenuto, un link di ritorno come Torna all’indice evita all’utente di dover scorrere manualmente la pagina verso l’alto.
Un altro aspetto importante è la stabilità degli identificatori. Se cambi spesso il testo delle sezioni ma mantieni gli stessi id, i collegamenti restano validi. Questo è fondamentale in documentazione, knowledge base e pagine di supporto, dove i link possono essere condivisi o salvati nei preferiti.
Nota anche il piccolo blocco di codice nell’esempio: mostra come un collegamento interno possa essere inserito in un paragrafo per rimandare a una sezione specifica. Questo è uno dei casi d’uso più comuni in articoli tecnici e tutorial.
Best practice
- Usa id descrittivi: meglio configurazione di un generico sezione2.
- Evita duplicati: un id deve comparire una sola volta nella pagina.
- Offri sempre un ritorno: nei documenti lunghi, inserisci un link per tornare all’indice o alla sezione principale.
- Rendi l’indice coerente: il testo dei link deve rispecchiare il titolo della sezione di destinazione.
- Non abusare delle ancore: usale dove migliorano davvero la navigazione, non in ogni singolo paragrafo.
- Verifica la leggibilità: il nome dell’ancora dovrebbe essere comprensibile anche per chi legge il codice.
In un progetto reale, questa disciplina ti aiuta a mantenere la pagina ordinata e a evitare problemi quando il contenuto cresce. Le ancore interne non sono solo una comodità: sono parte dell’architettura informativa del documento.
Riepilogo
Abbiamo visto un uso pratico dei collegamenti ipertestuali e delle ancore interne: guidare l’utente in avanti e riportarlo facilmente al punto corretto. Questo è particolarmente utile in pagine lunghe, guide tecniche, manuali e documentazioni.
- Assegna un id a ogni sezione importante.
- Crea link con href="#id" per saltare tra i punti della pagina.
- Inserisci un punto di ritorno stabile, come un indice o un’intestazione principale.
- Offri link di ritorno dopo gli approfondimenti più lunghi.
Se progetti bene le ancore interne, la pagina diventa più facile da leggere, più semplice da aggiornare e più utile per chi la consulta spesso.
Approfondisci con risorse ufficiali
- MDN Web Docs — documentazione su a e sugli attributi href e id.
- WHATWG HTML Living Standard — specifica ufficiale del comportamento dei collegamenti e degli identificatori.
- W3C WAI — linee guida sull’accessibilità dei collegamenti e della navigazione interna.
- MDN Web Docs — approfondimenti su struttura semantica e navigazione nei documenti HTML.