Home Digital Hyperlink HTML

Hyperlink HTML

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.

Manuele Morandinhttps://www.manuelemorandin.net
Consulente SEO e tecnico informatico, aiuto imprenditori e professionisti a sviluppare on line la propria attività, attraverso il posizionamento sui motori di ricerca, campagne pubblicitari e gestione dei social network.

LASCIA UN COMMENTO

Per favore inserisci il tuo commento!
Per favore inserisci il tuo nome qui

Consulenza SEO

Hai un progetto che non decolla, che non ottiene i risultati sperati? Oppure stai per partire con una nuova idea e vuoi che sia tutto a posto. Contattami per una Consulenza, per un’analisi rapida o per un Audit SEO approfondito del tuo sito, spesso il problema è più semplice di quel che si pensa.

Il progetto

ManueleMorandin.net è il punto di incontro attraverso articoli, Email e messaggi, con chi vuole scoprire le potenzialità del web per la propria attività. Comprendere la SEO nelle sue evoluzioni. Conoscere ed usare gli strumenti digitali più efficienti per ottenere il massimo rendimento dal web.