Introduzione
Quando si costruisce un sito composto da più pagine, i collegamenti ipertestuali non servono soltanto a spostarsi da un documento all’altro. È possibile combinare un collegamento verso una pagina diversa con un’ancora interna, così da aprire direttamente una sezione precisa del documento di destinazione.
Questa tecnica è particolarmente utile per manuali, documentazione tecnica, FAQ e pagine di supporto. Un utente può, per esempio, fare clic su “Installazione” nella home page e raggiungere direttamente la sezione Installazione di una pagina dedicata, senza doverla cercare manualmente.
Per ottenere questo risultato si usa la sintassi pagina.html#identificatore. La parte prima del cancelletto indica il documento da aprire, mentre la parte dopo il cancelletto identifica l’elemento HTML di destinazione tramite l’attributo id.
Codice completo
Il primo file, chiamato index.html, contiene alcuni collegamenti verso sezioni specifiche di un’altra pagina:
<nav aria-label="Navigazione principale">
<ul>
<li>
<a href="guida.html#installazione">
Installazione
</a>
</li>
<li>
<a href="guida.html#configurazione">
Configurazione
</a>
</li>
<li>
<a href="guida.html#risoluzione-problemi">
Risoluzione dei problemi
</a>
</li>
</ul>
</nav>Il file di destinazione, chiamato guida.html, deve contenere elementi con gli stessi valori assegnati agli attributi id:
<main>
<h1>Guida del progetto</h1>
<section id="installazione">
<h2>Installazione</h2>
<p>
Scarica il progetto e installa le dipendenze necessarie.
</p>
</section>
<section id="configurazione">
<h2>Configurazione</h2>
<p>
Modifica il file di configurazione secondo le tue esigenze.
</p>
</section>
<section id="risoluzione-problemi">
<h2>Risoluzione dei problemi</h2>
<p>
Consulta questa sezione quando incontri un errore.
</p>
</section>
</main>Se i file si trovano in cartelle diverse, è necessario usare il percorso relativo corretto:
<!-- index.html nella cartella principale -->
<a href="documentazione/guida.html#installazione">
Leggi le istruzioni di installazione
</a>
<!-- pagina dentro documentazione/ che rimanda alla home -->
<a href="../index.html">
Torna alla pagina principale
</a>Spiegazione
Il ruolo di href
L’attributo href contiene l’indirizzo del collegamento. In guida.html#installazione, il browser interpreta guida.html come il documento da caricare e #installazione come il punto preciso da visualizzare.
Il ruolo di id
L’attributo id assegna un identificatore univoco a un elemento. Il valore dell’id deve corrispondere esattamente al frammento presente nell’URL. Per esempio, #risoluzione-problemi può raggiungere soltanto un elemento che possiede id="risoluzione-problemi".
Gli identificatori sono sensibili alla precisione: maiuscole, minuscole, spazi e caratteri speciali possono causare collegamenti non funzionanti. È preferibile usare nomi brevi, descrittivi e scritti in minuscolo, separando le parole con il trattino.
Percorsi relativi e percorsi assoluti
Un percorso relativo, come guida.html#installazione, dipende dalla posizione del file corrente. È adatto a progetti che vengono spostati insieme, perché continua a funzionare anche quando l’intero sito cambia dominio.
Un percorso assoluto può includere invece il dominio completo:
<a href="https://esempio.it/guida.html#installazione">
Vai all’installazione sul sito ufficiale
</a>I collegamenti assoluti sono utili quando si punta a un sito esterno, mentre quelli relativi sono spesso più pratici per collegare pagine dello stesso progetto.
Best practice
- Assegna a ogni id un nome univoco all’interno della pagina.
- Usa identificatori descrittivi, leggibili e privi di spazi.
- Controlla che il percorso relativo corrisponda realmente alla struttura delle cartelle.
- Scrivi testi del link esplicativi, come “Leggi la configurazione”, evitando formule generiche come “Clicca qui”.
- Usa gli elementi semantici, come nav, main e section, per rendere comprensibile la struttura del documento.
- Verifica i collegamenti dopo aver rinominato file, cartelle o identificatori.
- Evita di duplicare lo stesso id in più elementi della pagina.
- Non inserire caratteri complessi negli identificatori: trattini e lettere minuscole rendono gli URL più leggibili.
Un errore frequente consiste nel collegare #installazione quando l’elemento di destinazione possiede invece id="installazione-base". In questo caso il browser aprirà la pagina, ma non potrà spostarsi verso la sezione richiesta.
Riepilogo
Per collegare una pagina a una sezione precisa di un altro documento occorre combinare il percorso del file con un frammento URL. La sintassi fondamentale è:
<a href="pagina.html#sezione">
Testo del collegamento
</a>Nel documento di destinazione deve essere presente un elemento equivalente:
<section id="sezione">
Contenuto della sezione
</section>Questa soluzione permette di creare navigazioni chiare tra pagine diverse, mantenendo i collegamenti leggibili e semplici da gestire.