Il tag a accompagnato dall’attributo href è l’elemento HTML che consente di specificare link ad altre risorse, siano esse interne o esterne alla pagina web.
Tale tag può essere applicato sia su un testo che ad un’immagine (a href img).
L’elemento a cui il tag viene applicato assume il nome di anchor.
Indice
a href con anchor testuale
In questa sezione potrai vedere un esempio pratico di tag href applicato su un testo.
In questo caso, il codice da utilizzare è il seguente:
<a href="https://www.dariocapozzi.it/blog/web-development/">testo del link</a>
Il codice riportato qui sopra, quando inserito in una pagina HTML, produce il seguente risultato:
In sostanza, si ottiene un collegamento ipertestuale all’indirizzo “https://www.dariocapozzi.it/blog/web-development/”, applicato sul testo “testo del link”.
a href img
Anche le immagini possono essere utilizzate come anchor.
E’ sufficiente inserire il codice HTML di gestire le immagini tra i tags a.
Ecco un esempio:
<a href="https://www.dariocapozzi.it/blog/prodotti-consigliati/">
<img src="https://www.dariocapozzi.it/wp-content/uploads/2021/09/zaino-porta-pc-1024x544.jpg"/>
</a>
Inserendo tale codice si ottiene il seguente risultato:
Tipologie differenti di link
Il tag a tramite l’attributo href può esprimere link a differenti tipo di contenuti. In questa sezione analizzeremo i principali.
Link a risorse esterne
Per fornire un link a risorse esterne è sufficiente inserire nell’attributo href l’url della pagina del sito esterno.
<a href="https://en.wikipedia.org/wiki/HTML">
la pagina di Wikipedia relativa all'HTML
</a>
Link a risorse interne
La struttura del tag è lo stesso proposto nell’esempio precedente.
Nella sezione relativa all’utilizzo del tag con anchor testuale è presente un esempio di link a risorsa interna.
Link a sezioni della stessa pagina
La sintassi da utilizzare per linkare una sezione della stessa pagina del link è la seguente:
<a href="#a_href_con_anchor_testuale">
a href con anchor testuale
</a>
dove ‘a_href_con_anchor_testuale’ corrisponde all’ID di un elemento presente nella pagina.
Link ad azioni (URI)
Inserendo nel tag href un URI è possibile fare in modo che il click sul tag a triggeri delle azioni diverse dalla navigazione ad una pagina web.
Ad esempio:
- mailto:john.doe@example.com avvierà il client di posta predefinito dell’utente predisponendo l’invio di un’email a john.doe@example.com
- tel:+1-816-555-1212 avvierà il programma per la gestione delle telefonate sul dispositivo, predisponendo l’avvio di una telefonata al numero specificato
Attributi del tag a
Oltre al tag href esistono altri attributi che caratterizzano il tag a.
I principali sono:
- rel: serve per specificare la relazione tra la pagina dove è contenuto ed il contenuto linkato. Viene soprattutto utilizzato quando si vuole che il crawler di Google non segua il documento linkato. Tale indicazione viene fornita grazie al valore nofollow.
- target: viene utilizzato per indicare dove aprire la risorsa linkata. Solitamente, tramite il valore _blank si specifica di aprire la risorsa un nuovo tab del browser.
Approfondimenti tag href
Puoi approfondire altri argomenti relativi all’HTML e allo sviluppo web leggendo i seguenti articoli:
- Tutorial HTML
- Background image CSS – applicare lo sfondo
- Eseguire codice JavaScript su qualunque pagina web
Conclusioni
In questo articolo hai visto alcuni esempi di utilizzo del tag a. Inoltre, hai avuto modo di scoprire i principali attributi disponibili per il tag a.