Lezione 8: Link, Anchor e Percorsi URL - Guida Completa all'HTML

Scopri come creare collegamenti ipertestuali efficaci in HTML, la differenza tra percorsi assoluti e relativi e l'uso dei tag anchor per la navigazione interna.

Introduzione ai Collegamenti Ipertestuali

Il vero potere del World Wide Web risiede nella sua capacità di collegare informazioni disparate in una rete globale. Senza i link, ogni pagina web sarebbe un'isola isolata, e l'utente dovrebbe digitare manualmente l'indirizzo URL di ogni singola risorsa per navigare tra i contenuti.

In HTML, i collegamenti vengono creati utilizzando il tag <a>, che sta per anchor (ancora). Questo elemento permette di collegare la pagina corrente a un'altra risorsa: un'altra pagina web, un file, un indirizzo email o persino una sezione specifica della stessa pagina. In questa lezione, esploreremo in profondità come utilizzare correttamente l'elemento anchor e, soprattutto, come gestire i percorsi URL, un concetto fondamentale che spesso mette in difficoltà i principianti.

Il Tag Anchor: Struttura e Attributi

Il tag <a> è un elemento di tipo inline, il che significa che non crea un salto di riga automatico e si inserisce nel flusso del testo. Per funzionare, l'elemento anchor necessita di un attributo fondamentale: l'attributo href (Hypertext Reference).

L'attributo href

L'attributo href specifica la destinazione del link. Se dimentichiamo di inserire l'attributo href, il browser tratterà il tag <a> come un semplice testo, senza renderlo cliccabile e senza applicare gli stili predefiniti (come il colore blu e la sottolineatura).

L'attributo target

Un altro attributo molto comune è target, che definisce dove deve aprirsi il collegamento. I valori più utilizzati sono:

  • _self (predefinito): Apre il link nella stessa scheda o finestra.
  • _blank: Apre il link in una nuova scheda o finestra del browser.

Esempio di base

Ecco come si scrive un link semplice che punta a un sito esterno:

<!-- Link che apre Google in una nuova scheda -->
<a href="https://www.google.com" target="_blank">Visita Google</a>

In questo esempio, il testo "Visita Google" è l'unico elemento visibile all'utente (il link text), mentre l'attributo href contiene l'URL completo della destinazione.

Percorsi URL: Assoluti vs Relativi

Questa è la parte più critica della lezione. Sapere cosa è un link è semplice; sapere come indirizzare il browser verso il file corretto richiede la comprensione dei percorsi (paths).

Percorsi Assoluti

Un percorso assoluto è l'indirizzo completo di una risorsa. Include il protocollo (http:// o https://), il dominio (www.esempio.it) e l'eventuale percorso della cartella o del file.

Quando usarli? Si utilizzano esclusivamente quando si punta a una risorsa che si trova su un server diverso dal proprio. Ad esempio, se vuoi linkare Wikipedia o Facebook, devi usare un percorso assoluto.

Percorsi Relativi

Un percorso relativo punta a una risorsa all'interno dello stesso server, partendo dalla posizione della pagina corrente. I percorsi relativi sono fondamentali perché rendono il sito "portabile": se sposti l'intero progetto da un server di test a un server di produzione, i link continueranno a funzionare perché non dipendono dal nome del dominio.

Tipi di percorsi relativi

  1. Stessa cartella: Se il file di destinazione si trova nella stessa cartella della pagina corrente, basta scrivere il nome del file. href="contatti.html"

  2. Sottocartella: Se il file è dentro una cartella chiamata pagine che si trova nella directory corrente. href="pagine/servizi.html"

  3. Cartella superiore: Per "uscire" dalla cartella corrente e risalire di un livello, si usano due punti e uno slash (../). href="../index.html"

Esempio Pratico di Struttura File

Immaginiamo questa struttura di cartelle:

  • /root
    • index.html
    • /blog
      • articolo1.html
      • articolo2.html
    • /assets
      • img/logo.png

Se ci troviamo in articolo1.html e vogliamo tornare alla home (index.html), dobbiamo risalire di un livello:

<!-- Da /blog/articolo1.html a /root/index.html -->
<a href="../index.html">Torna alla Home</a>

Se invece vogliamo andare da index.html a articolo1.html:

<!-- Da /root/index.html a /root/blog/articolo1.html -->
<a href="blog/articolo1.html">Leggi il primo articolo</a>

Link Interni e Ancore (Jump Links)

L'HTML permette di creare link che non portano a un'altra pagina, ma a un punto specifico della pagina stessa. Questo è estremamente utile per creare "Indici" o "Tabelle dei contenuti" in pagine molto lunghe.

Come creare un'ancora

Per fare ciò, dobbiamo usare due passaggi:

  1. Assegnare un id univoco all'elemento di destinazione.
  2. Creare un link che faccia riferimento a quell'ID preceduto dal simbolo cancelletto (#).

Esempio di Navigazione Interna

<!-- Menu di navigazione in cima alla pagina -->
<nav>
  <ul>
    <li><a href="#sezione-chi-siamo">Chi Siamo</a></li>
    <li><a href="#sezione-servizi">I Nostri Servizi</a></li>
    <li><a href="#sezione-contatti">Contattaci</a></li>
  </ul>
</nav>

<!-- Contenuto della pagina -->
<div style="margin-top: 1000px;"></div> <!-- Spazio per testare lo scroll -->

<h2 id="sezione-chi-siamo">Chi Siamo</h2>
<p>Siamo un team di esperti sviluppatori web...</p>

<div style="margin-top: 1000px;"></div>

<h2 id="sezione-servizi">I Nostri Servizi</h2>
<p>Offriamo consulenza in HTML, CSS e JavaScript...</p>

<div style="margin-top: 1000px;"></div>

<h2 id="sezione-contatti">Contattaci</h2>
<p>Scrivici a email@esempio.it</p>

<!-- Link per tornare su -->
<a href="#">Torna in alto</a>

Nota: L'attributo href="#" senza un ID specifico è una convenzione che riporta l'utente all'inizio della pagina.

Link a Risorse Speciali: Email e Telefono

Non tutti i link devono portare a una pagina web. Esistono dei protocolli specifici per attivare applicazioni esterne installate sul dispositivo dell'utente.

Link Email (mailto)

Utilizzando il prefisso mailto:, possiamo aprire il client di posta predefinito dell'utente con l'indirizzo del destinatario già compilato.

<a href="mailto:info@miosito.it">Inviaci una email</a>

Link Telefonici (tel)

Fondamentale per i siti mobile-friendly, il protocollo tel: permette all'utente di avviare una chiamata semplicemente cliccando sul numero.

<a href="tel:+390123456789">Chiamaci ora: +39 0123 456789</a>

Esempi Pratici e Casi d'Uso Reali

Caso 1: Il Menu di Navigazione (Navbar)

In un sito reale, i link non sono sparsi a caso, ma organizzati in una <nav>.

<header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="prodotti/catalogo.html">Catalogo</a></li>
      <li><a href="about.html">Chi Siamo</a></li>
      <li><a href="contatti.html">Contatti</a></li>
    </ul>
  </nav>
</header>

Caso 2: Link a File Scaricabili

Se vuoi che un link non apra un file (come un PDF) nel browser ma lo scarichi direttamente, puoi usare l'attributo download.

<a href="assets/documenti/guida-utente.pdf" download>Scarica la Guida PDF</a>

Errori Comuni e FAQ

Perché il mio link non funziona?

  1. Errore di battitura (Typo): Controlla che il nome del file sia scritto esattamente come nel file system (attenzione: su Linux/Server i nomi sono case-sensitive, quindi Pagina.html è diverso da pagina.html).
  2. Percorso errato: Se vedi l'errore "404 Not Found", significa che il percorso relativo è sbagliato. Verifica quante cartelle devi risalire o scendere.
  3. Mancanza di href: Assicurati che l'attributo sia presente, altrimenti il link non sarà attivo.

Qual è la differenza tra _blank e _self?

_self è l'opzione standard: l'utente lascia il tuo sito per andare su un altro. _blank è consigliato quando linki a siti esterni, così l'utente non perde la tua pagina e può tornare facilmente a lei chiudendo la nuova scheda.

È sicuro usare target="_blank"?

Per motivi di sicurezza e performance, quando usi target="_blank", è buona norma aggiungere l'attributo rel="noopener noreferrer". Questo impedisce alla nuova pagina di avere accesso all'oggetto window.opener della pagina originale, proteggendo l'utente da potenziali attacchi di phishing.

Prossimi Passi

Ora che hai padroneggiato l'uso dei link e dei percorsi URL, sei pronto per rendere il tuo sito interattivo e navigabile. Ecco cosa ti consigliamo di studiare successivamente:

  1. CSS per i Link: Impara a cambiare il colore dei link, rimuovere la sottolineatura e creare effetti di hover (quando il mouse passa sopra il link).
  2. Liste HTML: Scopri come combinare i link con le liste <ul> e <li> per creare menu di navigazione professionali.
  3. Immagini come Link: Prova a inserire un tag <img> all'interno di un tag <a> per creare bottoni o loghi cliccabili.

Ricorda: la pratica è l'unico modo per non confondersi con i percorsi relativi. Crea diverse cartelle sul tuo computer e prova a collegarle tra loro finché non diventerà naturale!