a href: come ag­giun­ge­re link al tuo sito web

Il tag HTML a href viene uti­liz­za­to per ag­giun­ge­re link (o col­le­ga­men­ti, in italiano) interni ed esterni in un sito web. I valori am­mis­si­bi­li dell’attributo HTML href sono definiti con pre­ci­sio­ne. Tra i possibili campi di utilizzo, oltre al col­le­ga­men­to ad altri siti web, c’è anche il rein­di­riz­za­men­to a e-mail o numeri di telefono.

Che cos’è href e a cosa serve?

Con a href crei link interni o esterni in un documento HTML. Se usato cor­ret­ta­men­te, l’attributo href si integra per­fet­ta­men­te nel tuo sito web e viene mostrato sotto forma di col­le­ga­men­to iper­te­stua­le. Le vi­si­ta­tri­ci e i vi­si­ta­to­ri del tuo sito web possono quindi fare clic per andare su un’altra pagina o su un’altra de­sti­na­zio­ne all’interno del sito web. href sta per “hyper reference” e indica la de­sti­na­zio­ne del link de­si­de­ra­to.

L’uso degli attributi href sul tuo sito web presenta numerosi vantaggi: ad esempio, tramite i link inseriti crei una struttura migliore, faciliti la na­vi­ga­zio­ne o fornisci in­for­ma­zio­ni ag­giun­ti­ve. I link possono essere utili anche per la SEO. Secondo Google, non importa se utilizzi un URL assoluto che include il nome di dominio o un URL relativo senza il nome di dominio pre­ce­den­te­men­te men­zio­na­to.

Per vi­sua­liz­za­re questo video, sono necessari i cookie di terze parti. Puoi accedere e mo­di­fi­ca­re le im­po­sta­zio­ni dei cookie qui.

Qual è la struttura di a href?

La sintassi di href è sempre la stessa in HTML e si presenta così:

<a href="URL">Designazione della destinazione del link</a>

Ogni elemento svolge una funzione im­por­tan­te:

• La lettera a introduce il col­le­ga­men­to, indicando il testo di an­co­rag­gio (o “anchor text” in inglese). Questo tag HTML definisce il punto di inizio e di fine del col­le­ga­men­to iper­te­stua­le.
• L’attributo href viene uti­liz­za­to all’interno del testo di an­co­rag­gio e definisce la de­sti­na­zio­ne del ri­spet­ti­vo link. Oltre a un sito web interno o esterno, si possono collegare anche documenti PDF o immagini, ad esempio.
• L’URL a cui deve puntare il link è posto tra vir­go­let­te.
• Segue il testo visibile su cui sarà possibile cliccare in seguito.
• Infine, il testo di an­co­rag­gio viene chiuso.

I link vengono spesso combinati con l’attributo title per definire il titolo del link (“Link title” in inglese), una de­scri­zio­ne al­ter­na­ti­va della de­sti­na­zio­ne del link. Il titolo del link può contenere in­for­ma­zio­ni ag­giun­ti­ve sul sito web collegato. Compare nel front end quando il mouse passa sopra il link senza cliccarci sopra. Inserire una de­scri­zio­ne per i link è anche una misura SEO con­si­glia­ta. In HTML, si presenta come segue:

<a href="URL" title="Titolo del link">Testo di ancoraggio</a>

Quali valori può avere href?

I valori che può avere l’attributo href in HTML sono definiti con pre­ci­sio­ne, al­tri­men­ti il col­le­ga­men­to non avviene cor­ret­ta­men­te. I valori ammessi per href sono i seguenti:

• Un URL assoluto: l’URL assoluto è il tipico esempio di utilizzo di a href, che rein­di­riz­za di­ret­ta­men­te a un sito web esterno. Include il nome di dominio, il percorso e il nome del file (se di­spo­ni­bi­le). Esempio: <a href="www.paginaesempio.it/tema/index.html">Link assoluto alla pagina di esempio</a>
• Un URL relativo: in un URL relativo si specifica solo il percorso e, fa­col­ta­ti­va­men­te, il nome del file. Per questo motivo, gli URL relativi sono molto più corti di quelli assoluti. Esempio: <a href="/tema/index.html">Link relativo alla pagina di esempio</a>
• Link a un elemento: un link diretto a un elemento è possibile se questo dispone di un ID definito. Così avrai la pos­si­bi­li­tà di collegare in­ter­na­men­te aree se­le­zio­na­te del tuo sito web. Esempio: <a href="#section3">Link diretto a un elemento</a>
• Altri pro­to­col­li: href è adatto anche ad altri pro­to­col­li, ad esempio se desideri impostare un col­le­ga­men­to diretto a un de­ter­mi­na­to indirizzo e-mail. Funziona tramite mailto:. Altri pro­to­col­li possibili sono https://, ftp:// o file:.
• Script: anche gli script, come ad esempio Ja­va­Script, sono valori con­sen­ti­ti per a href. Esempio: <a href="javascript:alert(Hai altre domande?');">

Cinque esempi di utilizzo di a href

Come abbiamo visto, esistono diversi usi di a href che puoi im­ple­men­ta­re sul tuo sito web. Di seguito ti esponiamo alcuni dei casi d’uso più comuni di href in HTML.

Utilizzo di un’immagine come link

Se desideri uti­liz­za­re href per impostare un’immagine come col­le­ga­men­to a una sot­to­pa­gi­na, utilizza il seguente codice:

<a href="https://www.paginaesempio.it"><img src=" /immagineesempio.jpg" alt="descrizioneimmagine"></a>

Col­le­ga­men­to a un indirizzo e-mail

Per col­le­gar­ti a un indirizzo e-mail, utilizza mailto: come aggiunta di­ret­ta­men­te davanti all’indirizzo. Si presenta così:

<a href="mailto:mariorossi@paginaesempio.it">mariorossi@paginaesempio.it</a>

Se la vi­si­ta­tri­ce o il vi­si­ta­to­re clicca sul link, si apre il suo programma standard per le e-mail e viene inserito au­to­ma­ti­ca­men­te l’indirizzo spe­ci­fi­ca­to (ma­rio­ros­si@pa­gi­nae­sem­pio.it) come de­sti­na­ta­rio. In al­ter­na­ti­va, gli utenti possono cliccare con il tasto destro del mouse sull’indirizzo e-mail per copiarlo e in­col­lar­lo nel programma o da qualche altra parte.

Col­le­ga­men­to a un numero di telefono

È anche possibile col­le­gar­si a un numero di telefono con a href. Ciò è par­ti­co­lar­men­te utile se qualcuno accede alla tua pagina tramite lo smart­pho­ne e desidera con­tat­tar­ti di­ret­ta­men­te. Il col­le­ga­men­to si presenta come segue:

<a href="tel:+391231234567">0123 1234567</a>

In questo caso è im­por­tan­te ag­giun­ge­re un segno “+” e il prefisso in­ter­na­zio­na­le dopo il ri­fe­ri­men­to te­le­fo­ni­co tel:. Lo zero del prefisso viene omesso.

Col­le­ga­men­to a un file Ja­va­Script

Con href puoi anche inserire un col­le­ga­men­to a un file Ja­va­Script. Il codice cor­ri­spon­den­te è questo:

<a href="javascript:esempio ( ) ">esempio</a>

Col­le­ga­men­to a una nuova scheda o finestra

Anche se i link sono utili per il tuo sito, non desideri ne­ces­sa­ria­men­te in­di­riz­za­re le tue vi­si­ta­tri­ci e i tuoi vi­si­ta­to­ri a una pagina web esterna. Per questo può essere utile inserire dei link che rimandano a una nuova scheda o a una nuova finestra. In questo modo, gli utenti rimangono sul tuo sito web e possono cercare altre in­for­ma­zio­ni in un secondo momento. Il codice ap­pro­pria­to per inserire questo col­le­ga­men­to è il seguente:

<a href="http://www.example.org" target="_blank">http://www.example.org</a>