Categorie
Web development

a href – il tag HTML per i link

a href

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.

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:

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.

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:

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.