Nel precedente articolo, Come utilizzare le liste di definizioni in HTML5 per creare
glossari FAQ e contenuti strutturati, abbiamo esplorato le liste di
definizione, completando i due video in cui abbiamo affrontato l'argomenti
degli elenchi in HTML5. In questo articolo, che fa parte del corso HTML5,
vedremo come gestire i collegamenti ipertestuali tra le pagine HTML,
inclusi collegamenti esterni, interni, mailto, telefonici, e l'uso di
attributi avanzati come target.
I collegamenti ipertestuali (o link) sono elementi fondamentali del web,
poiché permettono la navigazione tra pagine web e risorse online. In HTML5, i
collegamenti si creano utilizzando il tag <a> (abbreviazione di anchor).
Grazie ai collegamenti, gli utenti possono passare da una pagina all'altra con
facilità, migliorando l'esperienza di navigazione.
Possiamo scrivere un esempio base di collegamento ipertestuale, come segue:
<a href="https://www.example.com">Visita Example.com</a>
Collegamenti Esterni (<a> con Attributo href)
I collegamenti esterni sono quelli che puntano a un sito web esterno.
Utilizzando l'attributo href nel tag <a>, possiamo specificare l'URL di
destinazione. È buona pratica assicurarsi che i link siano sicuri e validi, in
modo da offrire una navigazione fluida.
<a href="https://www.example.com">Visita Example.com</a>
Nel precedente esempio, quando un utente della pagina clicca su Visita Example.com, il browser carica la pagina relativa e quindi l'utente lascia la
pagina attuale per spostarsi su quella di destinazione.
Potresti voler aprire la pagina, ma non chiudere la pagina dove si trova
l'utente al momento del click. Per aprire il collegamento in una nuova scheda,
si può usare l'attributo target="_blank":
<a href="https://www.example.com" target="_blank">Visita Example.com</a>
In questo caso, la pagina è aperta su un nuovo Tab del browser senza chiudere la pagina attualmente in visualizzazione dell'utente.
Collegamenti Interni (Ancore e Navigazione all'interno della Pagina)
I collegamenti interni permettono la navigazione all'interno della stessa pagina, o tra sezioni di una pagina web. Questo tipo di link è spesso usato per creare tabelle dei contenuti o collegamenti a sezioni specifiche in una pagina lunga.
Per creare un collegamento interno, dobbiamo usare un'ancora con l'attributo
id nel punto di destinazione e un link che punti a quell'ancora.
<!-- Destinazione dell'ancora -->
<h2 id="sezione1">Sezione 1</h2>
<!-- Link interno -->
<a href="#sezione1">Vai a Sezione 1</a>
Nel precedente esempio al click sul link, da parte dell'utente, la navigazione
si sposta sul punto dov'è definito il tag <h2>.
Collegamenti Mailto e Telefonici
Oltre ai collegamenti a pagine web, HTML5 permette anche di creare link che
aprono programmi di posta elettronica (mailto:) o applicazioni telefoniche
sui dispositivi mobili (tel:). Questi sono utili per fornire agli utenti un
modo rapido per contattare un'azienda o una persona.
Possiamo inserire un collegamento email, come segue:
<a href="mailto:info@example.com">Invia un'email a info@example.com</a>
Possiamo inserire un telefonico email, come segue:
<a href="tel:+391234567890">Chiama il +39 123 456 7890</a>
Attenzione!
I collegamenti email (`mailto:`) possono esporre gli indirizzi email allo **spam**, poiché gli spambot (programmi automatizzati) possono scansionare le pagine web e raccogliere indirizzi email visibili nel codice HTML. Anche i collegamenti telefonici (`tel:`) possono causare chiamate indesiderate se esposti a tali strumenti, anche se questo problema è meno comune rispetto agli indirizzi email.
In prossimi articoli ti mostrerò come ovviare a questi problemi con delle strategie alternative.
Conclusioni
I collegamenti ipertestuali sono essenziali per costruire la struttura del web. Che si tratti di collegamenti esterni, interni, mailto o telefonici, ogni tipo di link offre vantaggi specifici per la navigazione e l'interazione degli utenti. Con HTML5, è possibile migliorare l'accessibilità e l'esperienza utente utilizzando gli attributi avanzati in modo efficace.
