I link sono l’elemento che ha reso possibile il World Wide Web. Senza i link, le pagine web sarebbero documenti isolati, privi della capacità di collegarsi tra loro e creare quella rete interconnessa di informazioni che definiamo “web”. Il tag <a> (anchor, ancora) è il protagonista indiscusso della navigazione web, e comprenderne a fondo ogni aspetto è essenziale per qualsiasi sviluppatore.
Il Tag Ancora: Sintassi e Attributi Fondamentali
Il tag <a> crea un collegamento ipertestuale verso un’altra risorsa. L’attributo principale è href (Hypertext Reference), che specifica la destinazione del link. La sintassi base è: <a href="https://esempio.com">Testo del link</a>. Il testo racchiuso tra i tag di apertura e chiusura è detto anchor text (testo dell’ancora) ed è ciò che l’utente vede e può cliccare.
L’anchor text è estremamente importante sia per l’esperienza utente che per il SEO. Deve essere descrittivo e comunicare chiaramente dove porterà il link. Evita testi generici come “clicca qui” o “leggi di più” — preferisci invece testi come “consulta la guida ai tag HTML essenziali” o “scopri le best practice per le immagini”.
Oltre a href, il tag <a> accetta numerosi altri attributi che ne modificano il comportamento. I più importanti sono target, rel, title, download e hreflang, che analizzeremo nelle sezioni successive.
URL Assoluti vs Relativi
L’attributo href può contenere due tipi di URL: assoluti e relativi. Comprendere la differenza è essenziale per una corretta gestione dei link.
Un URL assoluto include il protocollo, il dominio e il percorso completo della risorsa, come https://www.esempio.com/pagina/articolo.html. Funziona da qualsiasi posizione e viene utilizzato principalmente per link verso siti esterni o quando si vuole garantire che il link funzioni indipendentemente dal contesto.
Un URL relativo specifica il percorso in relazione alla posizione del documento corrente. Ad esempio, articolo.html punta a un file nella stessa directory, ../immagini/foto.jpg risale di una directory e poi entra nella cartella “immagini”, e /contatti parte dalla root del dominio. I link relativi sono preferibili per i link interni al sito perché funzionano correttamente anche se il dominio cambia (ad esempio, durante lo sviluppo in ambiente locale o staging).
Esiste anche l’URL con protocollo relativo, che inizia con //, come //cdn.esempio.com/script.js. Questo formato eredita il protocollo (HTTP o HTTPS) dalla pagina corrente. Tuttavia, con la diffusione quasi universale dell’HTTPS, questa pratica è diventata meno comune.
Target, Rel e Sicurezza dei Link
L’attributo target controlla dove viene aperto il link. Il valore più comune è target="_blank", che apre il link in una nuova scheda del browser. Senza questo attributo, il link si apre nella stessa scheda, sostituendo la pagina corrente. Altri valori possibili sono _self (comportamento predefinito), _parent e _top (utilizzati con i frame, ormai rari).
Quando si utilizza target="_blank", è essenziale aggiungere anche l’attributo rel="noopener noreferrer" per motivi di sicurezza. Senza noopener, la pagina aperta nella nuova scheda ha accesso all’oggetto window.opener della pagina originale, il che potrebbe essere sfruttato per attacchi di phishing (la pagina aperta potrebbe modificare l’URL della pagina originale senza che l’utente se ne accorga). Il valore noreferrer impedisce inoltre l’invio dell’header Referer, proteggendo la privacy dell’utente.
La sintassi completa per un link esterno sicuro è quindi: <a href="https://esempio.com" target="_blank" rel="noopener noreferrer">Link esterno</a>. I browser moderni gestiscono automaticamente il caso noopener per i link con target="_blank", ma è comunque buona pratica specificarlo esplicitamente per compatibilità.
Anchor Link, Mailto e Tel
Oltre ai link verso pagine web, il tag <a> supporta diversi tipi speciali di destinazione che rendono le pagine web più interattive e funzionali.
Gli anchor link (link ad ancora) puntano a una sezione specifica della stessa pagina. Si creano in due passaggi: prima si assegna un attributo id all’elemento destinazione (ad esempio, <h2 id="sezione-contatti">), poi si crea un link con un href che inizia con il carattere # seguito dall’id (ad esempio, <a href="#sezione-contatti">Vai ai contatti</a>). Questo tipo di link è molto utilizzato per indici di pagina e per migliorare la navigazione in articoli lunghi.
I link mailto aprono il client di posta elettronica predefinito dell’utente con un nuovo messaggio precompilato. La sintassi è <a href="mailto:in**@*****io.com" data-original-string="5T2fUvgRhVCp41a7UH1RJA==7f5AGgEYqCHHWML1xE7EBhdugjwl8G4KnUOlZe10vbIz7I=" title="This contact has been encoded by Anti-Spam by CleanTalk. Click to decode. To finish the decoding make sure that JavaScript is enabled in your browser.">Inviaci un'email</a>. È possibile aggiungere parametri come oggetto e corpo del messaggio: mailto:in**@*****io.com" data-original-string="qEynyFakZLBK/eCtKR0gPA==7f5QLtzDqsqgaraaWN5pYd4J5H9+ldGp/GcahifsYBbo0a50F5eIz4kk+EQRD7LHc3qG2hI5VNm1SqUOE+YXwq8gzZFkbyNEFFMEFQlrdXZG40NoV51UTfIaJnu5pVWp5zO" title="This contact has been encoded by Anti-Spam by CleanTalk. Click to decode. To finish the decoding make sure that JavaScript is enabled in your browser.?subject=Richiesta%20informazioni&body=Salve.
I link tel permettono di avviare una chiamata telefonica, particolarmente utili su dispositivi mobili: <a href="tel:+390465846245">Chiama ora</a>. Il numero deve includere il prefisso internazionale nel formato E.164 per garantire il funzionamento corretto a livello globale.
SEO e Link: Dofollow, Nofollow e Link Building
I link hanno un’importanza fondamentale nel SEO. I motori di ricerca utilizzano i link per scoprire nuove pagine, comprendere le relazioni tra i contenuti e determinare l’autorità di un sito web. Questa è la base dell’algoritmo PageRank di Google.
Per impostazione predefinita, tutti i link sono dofollow, il che significa che trasmettono “link juice” (valore SEO) alla pagina di destinazione. Aggiungendo l’attributo rel="nofollow", si comunica ai motori di ricerca di non seguire il link e di non trasferire autorità. Questo è appropriato per link pubblicitari, contenuti generati dagli utenti (commenti), o link a siti di cui non si vuole garantire la qualità.
Google ha introdotto due ulteriori valori per l’attributo rel: sponsored per link pubblicitari o sponsorizzati, e ugc (User Generated Content) per link nei contenuti generati dagli utenti. Questi valori forniscono informazioni più granulari ai motori di ricerca rispetto al generico nofollow.
Per i link interni del tuo sito, utilizza sempre link dofollow (senza rel=”nofollow”). I link interni aiutano i motori di ricerca a comprendere la struttura del sito e a distribuire l’autorità tra le pagine. Una buona strategia di internal linking può migliorare significativamente il posizionamento del tuo sito.
Stilizzazione dei Link con CSS
I browser applicano stili predefiniti ai link: testo blu e sottolineato per i link non visitati, viola per quelli già visitati. Questi stili possono essere personalizzati con CSS utilizzando gli pseudo-selettori specifici per i link:
a:link— link non visitatoa:visited— link già visitatoa:hover— link sotto il cursore del mousea:active— link nel momento del clica:focus— link che ha ricevuto il focus (navigazione da tastiera)
L’ordine di questi pseudo-selettori nel CSS è importante e viene ricordato con l’acronimo LVHFA (Link, Visited, Hover, Focus, Active). Se l’ordine non è corretto, alcuni stati potrebbero non funzionare come previsto a causa della cascata CSS.
Nella progettazione dei link, assicurati sempre che siano chiaramente distinguibili dal testo circostante, anche per utenti con daltonismo. Non affidarti solo al colore: mantieni la sottolineatura o utilizza un altro indicatore visivo. Inoltre, lo stato :focus è essenziale per l’accessibilità da tastiera — non rimuoverlo mai senza fornire un’alternativa visiva equivalente.
Per un approfondimento sulla struttura completa di una pagina HTML e sulla corretta organizzazione dei link di navigazione, consulta il nostro articolo sulla struttura di una pagina HTML.
Hai bisogno di aiuto con i link e la navigazione del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.