Tag HTML <a>
Il tag HTML <a> crea collegamenti ipertestuali a pagine, file, sezioni e link email o telefonici. Esempi di target, rel e download.
Il tag <a> viene utilizzato per inserire collegamenti ipertestuali ad altre pagine, file, posizioni all'interno della stessa pagina, indirizzi email o qualsiasi altro URL. È possibile usare sia testo che immagini come collegamento ipertestuale.
Nel browser, i collegamenti ipertestuali differiscono per aspetto e colore. Per impostazione predefinita, i link HTML appaiono come testo blu sottolineato. Quando si passa il mouse su un link, diventa rosso (link attivo). I link già visitati (link visitati) diventano viola.
È possibile cambiare il colore dei link, rimuovere la sottolineatura o modificare il colore dei link utilizzando gli stili CSS.
Gli attributi "download", "media", "hreflang", "target", "rel" e "type" saranno presenti solo se l'attributo "href" è presente.
Finché non si definisce un altro target, la pagina collegata viene mostrata nella finestra del browser corrente.
Sintassi
Il tag <a> è composto da una coppia di tag. La destinazione del link viene impostata con l'attributo href nel tag di apertura, e il contenuto cliccabile (testo o immagine) viene scritto tra il tag di apertura (<a>) e quello di chiusura (</a>).
<a href="https://www.w3docs.com/">Visit W3docs</a>Il testo "Visit W3docs" diventa il collegamento ipertestuale cliccabile e facendo clic su di esso si viene indirizzati all'URL indicato in href.
Attributi
Il tag <a> può avere attributi che forniscono ulteriori informazioni su di esso.
L'attributo href
L'href è un attributo obbligatorio del tag <a>. Definisce un link nella pagina web o un punto nella stessa pagina web verso cui l'utente viene indirizzato dopo aver fatto clic sul link. Il valore dell'attributo è un'ancora o un URL. L'ancora punta all'ID (identificatore univoco) della parte della pagina web a cui si fa riferimento. Prima dell'ID si inserisce un cancelletto (#).
Appare così:
Tag HTML <a>
<a href="url">the link text</a>
<a href="#a">the link text</a>Esempio del tag HTML <a> con l'attributo href:
Esempio del tag HTML <a>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Risultato
Fai clic sul link e verrai reindirizzato alla home page del nostro sito web.
Usando l'attributo href del tag <a> con il tag <img> è possibile creare un'immagine collegata.
Esempio del tag HTML <a> per creare un'immagine collegata:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>L'attributo target
L'attributo target viene utilizzato per indicare al browser dove aprire il documento (per impostazione predefinita, i link si aprono nella finestra corrente).
L'attributo target può avere i seguenti valori:
_blank– apre il link in una nuova finestra o scheda._self– apre il link nella finestra corrente (questa è l'impostazione predefinita)._parent– apre il documento nel frame padre._top– apre il documento nel corpo intero della finestra.
Esempio del tag HTML <a> con l'attributo target:
Esempio del tag HTML <a> con un attributo target|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Risultato
Sicurezza con target="_blank": rel="noopener noreferrer"
Quando si apre un link in una nuova scheda con target="_blank", la pagina appena aperta può, nei browser meno recenti, accedere alla pagina originale tramite la proprietà JavaScript window.opener. Una pagina malevola potrebbe usare questo accesso per reindirizzare la scheda originale verso un sito di phishing — un attacco noto come reverse tabnabbing.
Per prevenirlo, aggiungere rel="noopener noreferrer":
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
External site
</a>noopener– impostawindow.openeranullnella nuova scheda, in modo che la pagina di destinazione non possa controllare né fare riferimento alla pagina che l'ha aperta.noreferrer– fa lo stesso dinoopenere impedisce inoltre al browser di inviare l'intestazioneReferer, in modo che la destinazione non sappia da quale pagina proviene il visitatore.
I browser moderni ora applicano noopener automaticamente per qualsiasi link con target="_blank", ma è buona pratica impostare rel esplicitamente affinché la protezione si applichi anche ai browser meno recenti e sia visibile nel codice.
L'attributo rel
Questo attributo definisce la relazione tra il documento corrente e quello collegato. I valori dell'attributo possono essere i seguenti:
alternate– una versione alternativa del documento.author– riferimento all'autore del documento o dell'articolo.bookmark– un collegamento permanente da usare per i segnalibri.nofollow– link a un documento non approvato (indica ai motori di ricerca che il crawler non deve seguire quel link).noopener/noreferrer– valori di sicurezza da usare contarget="_blank"(vedi sopra).
Il valore nofollow
Se si desidera creare un link nofollow, utilizzare rel="nofollow". Questo informa i motori di ricerca che non si approva il contenuto all'altra estremità del link. Il valore dell'attributo nofollow viene generalmente usato per link a pagamento e pubblicità. A volte il nofollow viene considerato un tag o un attributo, ma in realtà è un valore dell'attributo rel.
Esempio dell'attributo rel con il valore "nofollow":
Esempio dell'attributo "rel" con il valore "nofollow":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>L'attributo download
L'attributo download indica al browser di scaricare la risorsa collegata invece di navigare verso di essa. Funziona per le risorse servite dalla stessa origine (e per gli URL blob: e data:).
Se si assegna un valore all'attributo, quel valore diventa il nome file suggerito per il file salvato, indipendentemente dal nome del file sul server. Se viene lasciato vuoto, il browser mantiene il nome file originale.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Saves the file using its original name -->
<a href="/files/report.pdf" download>Download the report</a>
<!-- Saves the same file as "annual-report.pdf" -->
<a href="/files/report.pdf" download="annual-report.pdf">
Download the annual report
</a>
</body>
</html>Link email e telefonici: mailto: e tel:
Oltre agli URL ordinari, l'attributo href può contenere schemi speciali che aprono il client email o l'app telefonica del visitatore invece di una pagina web.
Un link mailto: apre il client email predefinito con l'indirizzo già compilato. È possibile aggiungere anche un oggetto e un corpo tramite parametri query:
<a href="mailto:[email protected]">Email us</a>
<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
Email us about your question
</a>Un link tel: richiede al dispositivo di chiamare il numero, il che è particolarmente utile sui telefoni cellulari:
<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>Collegamento a una sezione della stessa pagina (frammenti)
Per saltare a una parte specifica di una pagina, impostare href su un cancelletto (#) seguito dall'id dell'elemento di destinazione. Questo è detto frammento o link ancora.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- The link -->
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>First section content...</p>
<!-- The target: its id matches the href without the # -->
<h2 id="section2">Section 2</h2>
<p>Second section content...</p>
</body>
</html>Facendo clic sul link, la pagina scorre fino all'elemento il cui id corrisponde al valore dopo il #. È anche possibile collegarsi a una sezione di un'altra pagina combinando un URL e un frammento, ad esempio href="page.html#section2". Per saperne di più sulla costruzione degli indirizzi dei link, vedere HTML URL.
L'attributo hreflang
L'attributo hreflang indica la lingua del documento a cui punta il link (ad esempio hreflang="es" per una pagina in spagnolo). È puramente informativo — usato dai motori di ricerca e dalle tecnologie assistive — e non modifica la pagina corrente. Questo è diverso dall'attributo globale lang, che dichiara la lingua dell'elemento su cui è applicato.
<a href="https://es.example.com/" hreflang="es">Versión en español</a>Accessibilità: scrivere testo del link descrittivo
Gli utenti di screen reader spesso navigano saltando da un link all'altro, ascoltando solo il testo del link fuori contesto. Testi generici come "clicca qui" o "leggi di più" non trasmettono alcuna informazione sulla destinazione. Assicurarsi sempre che il testo del link descriva dove porta il collegamento.
<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>Per ulteriori informazioni sulle best practice per i link, vedere HTML Links.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| charset | char_encoding | Definisce il set di caratteri di un documento collegato. Non utilizzato in HTML5. |
| coords | coordinates | Definisce le coordinate di un link. Non utilizzato in HTML5. |
| download | filename | Definisce che la destinazione verrà scaricata quando si fa clic su un collegamento ipertestuale. |
| href | URL | Definisce l'URL del documento collegato. |
| hreflang | language_code | Definisce la lingua del documento collegato. |
| media | media_query | Definisce per quale tipo di media/dispositivo è ottimizzato il documento collegato. |
| name | section_name | Definisce il nome di un'ancora. Non utilizzato in HTML5. |
| ping | list_of_URLs | Definisce un elenco separato da spazi di URL a cui, quando si segue il link, il browser invia in background richieste POST con il corpo ping. Tipicamente utilizzato per il tracciamento. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Definisce la relazione tra l'oggetto di destinazione e il documento collegato. |
| rev | text | Definisce un link inverso, la relazione opposta dell'attributo "rel". Non utilizzato in HTML5. |
| shape | default rect circle poly | Definisce la forma del collegamento ipertestuale. Non utilizzato in HTML5. |
| target | _blank _parent _self _top | Definisce dove aprire il documento collegato. |
| type | media_type | Definisce il tipo di media nel formato di un tipo MIME per l'URL collegato. |
Il tag <a> supporta anche gli Attributi Globali e gli Attributi Evento.
Come applicare stili a un tag HTML <a>
I link hanno quattro stati che è possibile stilizzare separatamente con le pseudo-classi CSS. Per funzionare correttamente, devono essere scritti in questo ordine: :link, :visited, :hover, :active (da ricordare come "LoVe HAte").
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link { color: #1a73e8; } /* unvisited link */
a:visited { color: #6f42c1; } /* visited link */
a:hover { text-decoration: none; } /* on mouse-over */
a:active { color: #d93025; } /* on click */
</style>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>È possibile anche rimuovere la sottolineatura o cambiare il colore dei link con CSS.