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
L’elemento a in HTML
Il tag HTML a rappresenta un elemento inline
.
Se volessi approfondire cosa sia un elemento inline, ti invito a consultare l’articolo Tutorial HTML.
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.
Quando l’utente cliccherà sul tale link, il suo browser effettuerà lo scrolling nella parte di pagina contenente l’elemento caratterizzato dall’ID inserito.
Se volessi approfondire cosa sia un ID, ti invito a leggere l’articolo “Selettori CSS: una guida pratica con esempi“.
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
- Come fare una chiamata AJAX ( GET / POST )
- Come diventare sviluppatore web: guida completa
- Position Sticky CSS: guida ed esempi pratici
- Bootstrap CSS: cosa è e come utilizzarlo
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.