a href: come aggiungere link al tuo sito web

Il tag HTML a href viene utilizzato per aggiungere link (o collegamenti, in italiano) interni ed esterni in un sito web. I valori ammissibili dell’attributo HTML href sono definiti con precisione. Tra i possibili campi di utilizzo, oltre al collegamento ad altri siti web, c’è anche il reindirizzamento 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 correttamente, l’attributo href si integra perfettamente nel tuo sito web e viene mostrato sotto forma di collegamento ipertestuale. Le visitatrici e i visitatori del tuo sito web possono quindi fare clic per andare su un’altra pagina o su un’altra destinazione all’interno del sito web. href sta per “hyper reference” e indica la destinazione del link desiderato.

L’uso degli attributi href sul tuo sito web presenta numerosi vantaggi: ad esempio, tramite i link inseriti crei una struttura migliore, faciliti la navigazione o fornisci informazioni aggiuntive. 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 precedentemente menzionato.

Per visualizzare questo video, sono necessari i cookie di terze parti. Puoi accedere e modificare le impostazioni 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 importante:

• La lettera a introduce il collegamento, indicando il testo di ancoraggio (o “anchor text” in inglese). Questo tag HTML definisce il punto di inizio e di fine del collegamento ipertestuale.
• L’attributo href viene utilizzato all’interno del testo di ancoraggio e definisce la destinazione del rispettivo 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 virgolette.
• Segue il testo visibile su cui sarà possibile cliccare in seguito.
• Infine, il testo di ancoraggio viene chiuso.

I link vengono spesso combinati con l’attributo title per definire il titolo del link (“Link title” in inglese), una descrizione alternativa della destinazione del link. Il titolo del link può contenere informazioni aggiuntive sul sito web collegato. Compare nel front end quando il mouse passa sopra il link senza cliccarci sopra. Inserire una descrizione per i link è anche una misura SEO consigliata. 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 precisione, altrimenti il collegamento non avviene correttamente. I valori ammessi per href sono i seguenti:

• Un URL assoluto: l’URL assoluto è il tipico esempio di utilizzo di a href, che reindirizza direttamente a un sito web esterno. Include il nome di dominio, il percorso e il nome del file (se disponibile). 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, facoltativamente, 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 possibilità di collegare internamente aree selezionate del tuo sito web. Esempio: <a href="#section3">Link diretto a un elemento</a>
• Altri protocolli: href è adatto anche ad altri protocolli, ad esempio se desideri impostare un collegamento diretto a un determinato indirizzo e-mail. Funziona tramite mailto:. Altri protocolli possibili sono https://, ftp:// o file:.
• Script: anche gli script, come ad esempio JavaScript, sono valori consentiti 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 implementare 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 utilizzare href per impostare un’immagine come collegamento a una sottopagina, utilizza il seguente codice:

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

Collegamento a un indirizzo e-mail

Per collegarti a un indirizzo e-mail, utilizza mailto: come aggiunta direttamente davanti all’indirizzo. Si presenta così:

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

Se la visitatrice o il visitatore clicca sul link, si apre il suo programma standard per le e-mail e viene inserito automaticamente l’indirizzo specificato (mariorossi@paginaesempio.it) come destinatario. In alternativa, gli utenti possono cliccare con il tasto destro del mouse sull’indirizzo e-mail per copiarlo e incollarlo nel programma o da qualche altra parte.

Collegamento a un numero di telefono

È anche possibile collegarsi a un numero di telefono con a href. Ciò è particolarmente utile se qualcuno accede alla tua pagina tramite lo smartphone e desidera contattarti direttamente. Il collegamento si presenta come segue:

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

In questo caso è importante aggiungere un segno “+” e il prefisso internazionale dopo il riferimento telefonico tel:. Lo zero del prefisso viene omesso.

Collegamento a un file JavaScript

Con href puoi anche inserire un collegamento a un file JavaScript. Il codice corrispondente è questo:

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

Collegamento a una nuova scheda o finestra

Anche se i link sono utili per il tuo sito, non desideri necessariamente indirizzare le tue visitatrici e i tuoi visitatori 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 informazioni in un secondo momento. Il codice appropriato per inserire questo collegamento è il seguente:

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