a

Il tag <a> definisce un hyperlink, che viene utilizzato per collegare una pagina ad un’altra.

a hyperlink

All’elemento <a> si possono aggiungere vari attributi, il più importante dei quali è sicuramente quello href, che indica la destinazione del link. Senza questo attributo il tag diventerà solo un placeholder per un hyperlink.

Lo stile predefinito dei link, in tutti i browsers, è il seguente:

a tag a colors

Attributi

download
Indica che il link deve essere utilizzato per scaricare un risorsa. Se viene impostato un valore, diventa il nome del file da salvare e segue le limitazioni del filesystem.

href
L’unico attributo richiesto per definire un link. Indica un URL o un frammento di URL a cui punta il collegamento ipertestuale. Gli URL non sono limitati al protocollo HTTP, possono essere utilizzati anche con altri protocolli come file o ftp.

hreflang
Indica la lingua della pagina linkata. Ha scopo puramente informatico. I valori consentiti sono determinati dallo standard BCP47. Da utilizzare solo se presente anche l’attributo href.

ping
Una lista di URL separati da spazi. Quando il link viene cliccato, il browser invierà una richiesta POST con corpo PING a tutti gli URL. Tipicamente utilizzato per il tracking.

rel
Specifica la relazione tra il documento corrente e il documento linkato. Può assumere come valore uno dei tipi di link.

target
Specifica dove aprire la pagina linkata. Può assumere come valore una delle seguenti parole chiave:

  • _self: Carica il documento nello stesso frame (predefinito).
  • _blank: Carica il documento in una nuova finestra.
  • _parent: Carica il documento nel frameset genitore del frame corrente. In assenza del genitore, si comporta come _self.
  • _top: Carica il documento dentro la finestra originale completa (scheda del browser), cancellando gli altri frame. In assenza del genitore, si comporta come _self.

type
Specifica il tipo della risorsa linkata con un tipo di risorsa MIME.

Esempi

Collegamento ad un URL assoluto

<a href="https://gbfactory.it">
  GB Factory
</a>

Collegamento ad un URL relativo

<a href="//gbfactory.it">Scheme-relative URL</a>
<a href="/glossario/html/a">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

Collegamento ad un elemento sulla stessa pagina

<!-- Link che porta alla sezione -->
<a href="#Sezione">Salta alla sezione</a>

<!-- Sezione a cui porta il link -->
<h2 id="Sezione">Questa è una sezione</h2>

Si può utilizzare href="#top" o un frammento vuoto href="#" per portare la visualizzazione all’inizio della pagina.

Collegamento ad un’indirizzo email

<a href="mailto:[email protected]">Contattami via email!</a>

Questo link viene aperto nell’applicazione email dell’utente e gli permette di mandare un nuovo messaggio all’email specificata.

Collegamento ad un numero di telefono

<a href="tel:+39.1234.53.">+39 1234 53 45 93</a>
<a href="tel:+1(555)1234">(555) 1234</a>

I link tel: si comportano in diversi modi: sui dispositivi mobili compongono automaticamente il numero mentre sulla maggior parte dei sistemi operatici vengono eseguiti programmi che fanno chiamate come Skype o FaceTime.

Accessibilità

Rendere un link forte

Un errore comune è includere solamente una parola in un link, mentre, includendo più parole, il link diventa più semplice da cliccare.

<p>Per maggiori informazioni clicca <a href="/about">qui</a></p>
<p>Per maggiori informazioni <a href="/about">clicca qui</a></p>

Risorse esterne o non HTML

Un link che apre il contenuto in una nuova finestra o scheda con target=”_blank”, o che punta ad un file che viene scaricato, è meglio indicare cosa succede quando il link viene cliccato.

<a href="https://www.wikipedia.org" target="_blank">
  Wikipedia (nuova scheda)
</a>
<a href="presentazione.ppt" target="_blank">
  Presentazione (File PowerPoint)
</a>

Evitare gli eventi “onclick”

I link sono spesso utilizzati come bottoni “fasulli” impostando il loro href a # per poi ascoltare il loro evento click.

Questo utilizzo di un href causa errori inaspettati quando si prova a trascinare un link o aprirlo in una nuova scheda. Inoltre possono causare problemi ai lettori di schermo.

Per queste situazioni è necessario utilizzare il tag <button>.