Il tag <a>: href, target, rel, download, guida completa

L'«H» e la «T» di HTML stanno per HyperText: il web è, letteralmente, una rete di collegamenti. <a> (anchor, «ancora») è il tag che li crea. Sembra semplice, e per l'uso base lo è, ma quattro attributi nascondono dettagli che quasi tutti sbagliano almeno una volta.

1. href: URL assoluti contro relativi

Un URL assoluto include protocollo e dominio completi: funziona ovunque venga inserito. Un URL relativo è calcolato rispetto al documento corrente, comodo per i link interni al sito, ma si «rompe» se il file viene spostato o incorporato altrove.

<a href="https://developer.mozilla.org/it/docs/Web/HTML">
    assoluto
</a>

<a href="/pillole/prototype-chain">
    relativo (dalla radice del sito)
</a>

<a href="../altra-pagina.html">
    relativo (rispetto alla cartella)
</a>

<a href="#sezione-2">
    ancora (verso un id nella stessa pagina)
</a>

Il valore #id da solo, l'«ancora» che dà il nome al tag, scorre fino all'elemento con quell'id nella pagina corrente, senza ricaricare nulla.

Fonte: MDN Web Docs, «<a>»: href contiene un URL o un frammento URL; un frammento preceduto da # specifica una posizione interna al documento. 

2. target: dove si apre il link

target="_blank" apre il link in una scheda nuova. È l'unico valore che quasi tutti usano, ma porta con sé un rischio di sicurezza di cui parliamo subito dopo.

<a href="https://esempio.it" target="_blank">
    apri in nuova scheda
</a>

3. rel: le istruzioni di sicurezza sulla busta

Quando apri un link con target="_blank", la pagina appena aperta ottiene, per impostazione predefinita, un riferimento alla pagina che l'ha aperta tramite window.opener. Un sito malevolo aperto così potrebbe, in teoria, manipolare la scheda originale.

<a href="https://esterno.it" target="_blank" rel="noopener noreferrer">
   link esterno 
</a>

noopener impedisce l'accesso a window.opener, ma mantiene l'invio dell'header Referer. noreferrer fa lo stesso, e in più omette anche ogni informazione di provenienza.

Buona notizia: nei browser moderni, target="_blank" fornisce già implicitamente lo stesso comportamento di rel="noopener". MDN però continua a raccomandare di scriverlo esplicitamente, soprattutto per compatibilità con browser meno recenti e per rendere l'intento leggibile a chi legge il codice.

Fonte: MDN Web Docs, «rel=noopener» e «<a>»: impostare target=_blank fornisce implicitamente lo stesso comportamento di rel=noopener nei browser moderni, ma si raccomanda comunque di specificarlo. 

4. download: forzare un download invece di aprire

download dice al browser di scaricare la risorsa invece di navigarci sopra. Puoi anche suggerire un nome file specifico come valore dell'attributo.

<a href="/file/manuale.pdf" download="Manuale-PillsWeb.pdf"> 
   Scarica il manuale 
</a>

Il limite tecnico più importante, dal manuale ufficiale: download funziona solo con URL dello stesso dominio (same origin). Per un file ospitato su un altro dominio, l'attributo viene semplicemente ignorato: è una misura di sicurezza per impedire a un sito di forzare download da fonti esterne senza controllo.

In sintesi

<a> sembra il tag più semplice di HTML, e in fondo, per il 90% dei casi, basta href. Ma proprio perché è il tag più usato in assoluto, i suoi dettagli meno noti, come noopener e il limite same origin di download, vale la pena conoscerli prima che diventino un bug in produzione.