Hyperlinks, links e collegamenti, sono alla base del web, capire e conoscere tutti i segreti che li compongono diventa fondamentale per i tuoi progetti e in questo post ti spiego tutte le caratteristiche. Se invece vuoi scoprire il legame che hanno con i motori di ricerca leggi la guida Link e la SEO.
Cos’è un hyperlink
Un hyperlink o comunemente link è un collegamento tra due unità e nel mondo del web permette di mettere in collegamento due contenuti di qualsiasi tipologia, testi, immagini, video, suoni e documenti.
La sua creazione è ormai datata, ma il suo utilizzo è cresciuto a dismisura solo con la crescita della grande rete, rivoluzionando le nostre abitudini di lettura, attraverso nuove forme di testo chiamate ipertesti.
Come si riconosce un hyperlink
Essendo un componente fondamentale, si è stabilito fin dalle prime realizzazioni del linguaggio HTML che questo componente fosse soggetto ad una specifica formattazione, così da renderlo immediatamente riconoscibile agli occhi degli utenti, infatti qualsiasi link possiede la caratteristica di trasformare il cursore del mouse in una piccola mano con l’indice alzato quando questo ci si posiziona sopra e di rendere il testo sottolineato.
Inoltre su tutti browser i links testuali di default appaiono di colore blu nel caso non siano stati ancora visitati, di colore viola nel caso in cui sia già stata visitata la pagina a cui rimanda il link e di colore rosso nel momento in cui il link è attivo. Queste impostazioni comunque possono essere cambiate modificando il codice di stile associato alla pagina che spiego nel post Personalizzare i link con CSS.
La sintassi HTML del hyperlink
Gli hyperlinks nelle pagine web sono definiti attraverso il tag <a> dove “a” sta per anchor o ancora. La forma più comune di questo tag è composta dall’attributo href che specifica l’indirizzo a cui ci si collega e da un testo detto anche anchor text, che ha lo scopo di informare l’utente e i robot sul contenuto di destinazione del link, la sua sintassi è:
<a href=”URL”> testo </a>
<a href=”https://www.manuelemorandin.net”> Manuele Morandin </a> //link che rimanda alla home di questo sito
in alternativa al testo è possibile inserire un’immagine utilizzando la seguente sintassi:
<a href=URL><img src=URL immagine”></a>
<a href=”https://www.manuelemorandin.net“> <img src=”logomanuele” alt=”Logo Manuele Morandin” style=”width:50px;height:50px;border:0;”></a>//link da un’immagine rimanda alla home di questo sito
Hyperlink come segnalibro
E’ possibile utilizzare gli hyperlinks come segnalibri, ovvero dei link che permettono di raggiungere uno specifico punto di un documento. Questo sistema è spesso utilizzato nelle pagine con lunghi testi dove attraverso un indice è possibile scorrere direttamente al punto di interesse.
Per realizzare un segnalibro sono necessari due passaggi, il primo step consiste nel creare un id da associare ad un attributo della pagina come ad esempio il nome del capitolo:
<h2 id=”capitolo1″>capitolo 1</h2> //attribuzione id capitolo1 al capitolo 1
Questo è il punto nella pagina in cui il link rimanderà
Il secondo step invece consiste nel creare un link che contiene come url di destinazione l’ID desiderato preceduto dal simbolo #.
<a href=”#capitolo1″>Vai al capitolo 1/a>
questo è il link da cui si raggiunge il collegamento di interesse.
E’ possibile creare segnalibri anche da pagine esterne, aggiungendo all’ID di destinazione l’indirizzo completo della pagina:
<a href=”libro.html#capitolo1″>Vai al capitolo 1/a>
Gli attributi del tag <a> supportati da html5
Utilizzando il tag <a> è possibile caratterizzare i link che attraverso degli attributi forniscono funzioni agli utenti o informazioni supplementari ai robot dei motori di ricerca.
Gli attributi più utilizzati e supportati da HTML5 sono:
| Attributo | Scopo e descrizione | sintassi |
| href | Specifica l’URL di destinazione del link. | <a href=”URL“> |
| Download | Scarica un file quando viene cliccato un link, attribuisce al file scaricato il nome specificato nel valore filename, che può assumere qualsiasi valore. Il valore filename può essere omesso. | <a download=”filename”> |
| hreflang | Specifica la lingua del documento a cui ci si collega, i valori consentiti sono quelli della norma ISO 639-1 | <a hreflang=”language_code”> |
| Rel | Indica la relazione tra il contenuto corrente e il link a cui si rimanda | <a rel=”value“> |
| Target | Specifica dove aprire i link, se nella stessa finestra/scheda o in un altra | <a target=”_blank|_self|_parent|_top|framename“> |
| Media | Informa per quale dispositivo è ottimizzata la risorsa | <a media=”value“> |
Spero che questo post ti sia stato utile, ma se hai domande o vuoi fare una precisazione lascia un commento o inviami un messaggio dalla pagina contattami.
