<a>

Sommario

L' elemento HTML <a> (o l' elemento Ancora HTML) definisce un collegamento ipertestuale, il nome dell' obbiettivo di destinazione per un collegamento ipertestuale, o entrambi.

Attributi

Questo elemento include gli attributi globali.

charset Obsolete since HTML5
Questi attributi definiscono la codifica dei caratteri della risorsa linkata. Il valore è una lista di caratteri delimitata da spazi- e/o virgole - fissa come definito in RFC 2045. Il valore di default è ISO-8859-1.

Nota: Questo attributo è obsoleto in HTML5 e non dovrebbe essere usato. Per ottenere un effetto simile, usare l'header HTTP Content-Type sulla risorsa linkata.

coords HTML 4 only, Obsolete since HTML5
Per l' uso con le forme degli oggetti, questo attibuto usa una lista di numeri separata da virgole per definire le coordinate dell'oggetto nella pagina. Il valore di questo attributo dipende dal valore dell'attributo shape.

Valore dell'attributo shape

Formato delle coordinate Significato
circle

x,y,z 

  • x e y indicano le coordinate (in pixel) del centro della circonferenza;
  • z indica la lunghezza del raggio.
rect x,y,w,h
  • x e y indicano le coordinate dell'angolo superiore sinistro del rettangolo;
  • w e h indicano rispettivamente la larghezza e l'altezza del rettangolo.
polygon x1,y1,x2,y2,...
  • Ogni coppia di coordinate x,y definisce un punto del poligono; due punti consecutivi (o l'ultimo e il primo) vengono uniti da una linea.
datafld
Questo attributo specifica il nome della colonna di tale oggetto origine dati che fornisce i dati associati.

Nota:

datasrc
Questo attributo indica l'ID oggetto origine dei dati che fornisce i dati e che è legato a questo elemento.

Nota:

download HTML5
Questo attributo, se presente, indica che l' autore intende che il collegamento ipertestuale debba essere usato per scaricare una risorsa. Se l' attributo ha un valore, il browser dovrebbe interpretarlo come il nome del file da salvare in un file system locale. Non ci sono restrizioni sui valori consentiti, ma dovresti considerare che la maggior parte dei file system hanno delle limitazioni per quanto riguarda quale punteggiatura è supportata nei nomi del file, ed i browser sono predisposti ad aggiustare il nome del file di conseguenza.

Nota:

  • Può essere usato con URL blob: e data:, così da poter scaricare contenuti generati usando JavaScript (ad esempio un'immagine creata in un applicazione di disegno).
  • Se è presente l'header HTTP Content-Disposition e propone un diverso nome per il file, l'header ha la priorità su questo attributo.
  • Se l'header HTTP Content-Disposition ha valore inline, in Firefox l'header ha la precedenza, mentre in Chrome l'attributo download.
  • In Firefox 20 questo attributo è rispettato solo per link a risorse provenienti dalla stessa origine.
href
Questo è l'unico attributo richiesto per ancore che definiscono un collegamento ipertestuale. Esso indica il link obbiettivo, sia esso un URL o un frammento di URL. Un frammento di URL è un nome (un id) preceduto da un cancelletto (#), che specifica la posizione dell'obbiettivo nel documento corrente. Gli URL non sono limitati ai documenti web basati sul protocollo HTTP: possono essere usati con altri protocolli supportati dal browser, come file, ftp, e mailto.

Nota: Puoi usare il frammento apposito "top" per creare un collegamento per tornare in cima alla pagina; ad esempio <a href="#top">Torna all'inizio</a>. Questo comportamento è specificato in HTML5.

hreflang
Questo attributo indica la lingua della risorsa linkata. È puramente informativo. I valori permessi sono determinati dallo standard BCP47 per l'HTML5 e dallo standard RFC1766 per l'HTML4. Usa questo attributo solo se è presente anche l' attributo href.
media HTML5
Questo attributo specifica in quali dispositivi utilizzare il link. Il suo valore deve essere una media query. Questo attributo è utile principalmente quando vi è un collegamento ad un foglio di stile esterno che consente allo user agent di scegliere il più adatto per il dispositivo in uso.

Nota:

  • In HTML 4 sono accettate solo descrizioni letterali (separate da uno spazio) del supporto, vale a dire media types and groupsprint, screen, aural, braille, ... HTML 5 estende questo ad ogni tipo di media query, ossia un'estensione dei valori consentiti in HTML 4.
  • I browser che non supportano le Media Queries CSS3 potrebbero non riconoscere il collegamento adeguato; non dimenticare di impostare collegamenti alternativi, usando l'insieme ristretto di media queries definite in HTML 4.
methods
Il valore di questo attributo fornisce informazioni sulle funzioni che possono essere eseguite su un oggetto. I valori generalmente sono dati dal protocollo HTTP quando viene utilizzato, ma potrebbe (per ragioni simili a quelle per l'attributo title) essere utile includere informazioni consultive in anticipo nel collegamento. Ad esempio, il browser potrebbe scegliere un rendering diverso di un collegamento in funzione dei metodi specificati, qualcosa che è ricercabile potrebbe avere un'icona diversa, o un link esterno potrebbe essere intrerpretato con l'indicazione di lasciare il sito corrente. Questo attributo non è ben compreso o supportato neanche dal browser che lo ha definito, Internet Explorer 4. Methods Property (MSDN)
name HTML 4 only, Obsolete since HTML5
Questo attributo è richiesto in un ancora che definisce una destinazione all'interno di una pagina. Il valore per il name è simile al valore per l' attributo id e deve essere un identificatore alfanumerico e univoco nel documento. Secondo la specifica specifiche HTML 4.01, l' id e il name possono entrambi essere applicati all'elemento <a>, finchè hanno lo stesso valore.

Nota: Questo attributo è obsoleto in HTML5, usare l' attributo globale id.

ping HTML5
Se questo attributo è presente, viene mandata una notifica all'URL specificato quando l'utente segue il link.
rel
Questo attributo specifica la relazione tra l'oggetto di destinazione e il collegamento stesso. Il suo valore è una lista di tipi di link separati da spazi. La relazione predefinita è void, ossia nessuna.
Usare questo attributo solo se è presente anche l'attributo href.
rev HTML 4 only, Obsolete since HTML5
Questo attributo specifica un collegamento inverso, la relazione inversa dell' attributo rel. È utile per indicare l'origine un oggetto, ad esempio il suo autore.
shape HTML 4 only, Obsolete since HTML5
Questo attributo è utilizzato per definire una regione selezionabile per un collegamento ipertestuale associata con una figura per creare una mappa immagine. I valori per l' attributo sono circle (cerchio), default (l'intera area a disposizione) polygon (poligono) e rect (rettangolo). Le coordinate della mappa sono definite dall'attributo coords.
target
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato:
  • _self: Carica il documento nello stesso frame. Questo è il valore predefinito.
  • _blank: Carica il documento in una nuova finestra.
  • _parent: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
  • _top: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
Usare questo attributo solo se è presente anche l'attributo href.
type
Questo attributo specifica il tipo della risorsa linkata, sotto forma di tipo MIME. Solitamente è fornito solo come informazione secondaria, ma in futuro i browser potrebbero aggiungere un'icona che identifichi i tipi di file (ad esempio un piccolo altoparlante quando il tipo è audio/wav). Per una lista completa dei tipi MIME supportati, vedere http://www.w3.org/TR/html4/references.html#ref-MIMETYPES.
 
Usare questo attributo solo se è presente anche l'attributo href.
urn
Questo attributo presumibilmente supportato da Microsoft riferisce un nome uniforme di risorsa (uniform resource name (URN)) con il collegamento. Mentre era basato su lavori standard anni addietro, il significato di URN non è più ben definito, quindi questo attributo è insignificante. urn Property (MSDN)

Esempi

Collegamento ad un file esterno

<a href="http://www.mozilla.com/">Link esterno</a>

Risultato

Link esterno

Creare un'immagine cliccabile

Questo link aprirà la pagina https://developer.mozilla.org/ in una nuova finestra, per via dell'attributo target="_blank".

<a href="https://developer.mozilla.org/" target"_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN">
</a>

Risultato

MDN

Spesso si creano collegamenti o pulsanti che aprano il programma di email dell'utente. Per questo si usano i link mailto.

Per altri dettagli riguardanti  lo schema URL mailto, come ad esempio includere l'oggetto, del testo o altro contenuto, vedere i link Email o lo standard RFC 6068.

<a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a>

Risultato

Invia un'email a nowhere

Usare l'attributo download per scaricare un <canvas> come PNG.

Se si vuole permettere all'utente di scaricare un elemento <canvas> sotto forma di immagine, si può creare un link con l'attributo download e il contenuto del <canvas> come URL del file:

<!-- HTML -->
<canvas id="my-canvas"></canvas>
<a id="download-image" download="disegno.png">Scarica l'immagine</a>
// JavaScript
var link = document.querySelector("#download-image");
var canvas = document.querySelector("#my-canvas");
link.addEventListener("click"; function () {
  link.href = canvas.toDataURL();
}, false);

Specifiche

Specifica Stato Commento
WHATWG HTML Living Standard
The definition of '<a>' in that specification.
Living Standard  
HTML5
The definition of '<a>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<a>' in that specification.
Recommendation  

Compatibilità dei Browser

Funzionalità Chrome Firefox (Gecko) Internet Explorer Opera Safari
Supporto di base (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
href="#top" (Yes) 10.0 (10.0) (Yes) (Yes) (Yes)
download 14 20.0 (20.0) Not supported 15 Not supported
ping (Yes) Disabilitato di default Not supported (Yes) Not supported
Funzionalità Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Supporto di base (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
href="#top" (Yes) 10.0 (10.0) (Yes) (Yes) (Yes)
download (Yes) 20.0 (20.0) Not supported ? ?
ping   Disabilitato di default      

 

Nota riguardo a Gecko

  • A partire da Gecko 41 (Firefox 41.0, Thunderbird 41.0, SeaMonkey 2.38), un elemento <a> senza l'attributo href non è classificato come contenuto interattivo. Cliccando su di esso dentro un <label> viene attivato il contenuto etichettato (bug 1167816).

Click e focus

Un link ottiene il focus quando vi si clicca sopra in vari browser (come comportamento predefinito).

Cliccando su un <a> gli si assegna il focus?

Browser Desktop Windows 8.1 OS X 10.9
Firefox 30.0
Chrome ≥39 (Chromium bug 388666)
Safari 7.0.5 N.a. Solo quando ha l'attributo tabindex
Internet Explorer 11 N.a.
Opera 12

Toccando un <a> gli si assegna il focus?

Browser Mobili iOS 7.1.2 Android 4.4.4
Safari Mobile Solo quando ha l'attributo tabindex N.a.
Chrome 35 ??? Solo quando ha l'attributo tabindex

Note

Le seguenti sono chiavi di associazione riservate per due dei maggiori browser e non devono essere usate come valori di accesso: a, c, e, f, g, h, v, freccia sinistra e freccia destra.

L' HTML 3.2 definisce solo gli attributi name, href, rel, rev, e title.

L' attributo target non è definito nei browser che non supportano i frame, come Netscape 1. Inoltre, target non è consentito se si utilizza la variante rigorosa (strict) dell'XHTML, ma è limitata al frameset o alla forma "di transizione" (transitional).

Raccomandazioni JavaScript

Succede spesso che un tag <a> sia usato con l'evento onclick. Per evitare che la pagina venga ricaricata, l'attributo href viene spesso impostato a "#" o a "javascript:void(0)". Entrambi questi valori possono portare ad errori inaspettati quando si copiano e aprono link in una nuova scheda e/o finestra. Bisogna essere consapevoli di questo per ragioni di usabilità, e quando gli utenti usano il tag di ancoraggio, bisogna cercare di prevenire i comportamenti di default.

Vedi anche

Etichette del documento e nomi di chi ha collaborato alla sua stesura

Contributors to this page: nicolo-ribaudo, Renatvs88, teoli, Nicola_D
Ultima modifica di: nicolo-ribaudo,