Categorie
Web development

a href – il tag HTML per i link

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.

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:

testo del link

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:

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.

Seguimi su