Il tag <a> di HTML
Il motivo principale per cui l’HTML viene definito un linguaggio di marcatura ipertestuale (da cui il suo acronimo) si concretizza nel fatto che è possibile, grazie al tag a, impostare dei collegamenti verso altre pagine, detti appunto collegamenti ipertestuali o anche semplicemente link. Questi collegamenti sono fondamentali per la navigazione sul web e per creare una rete interconnessa di informazioni.
La sintassi per creare un link è la seguente:
<a href="pippo.html">Pippo</a>Ai fini della validazione XHTML è necessario specificare l’attributo “title”, che fornisce informazioni aggiuntive sul collegamento.
<a href="pippo.html" title="Pagina di Pippo">Pippo</a>Visivamente, verrà visualizzata la scritta “Pippo” e risulterà cliccabile con il tasto sinistro del mouse. Al click, l’utente verrà rimandato alla pagina specificata nell’attributo obbligatorio href, in cui è specificabile la pagina o la URL completa di destinazione del link.
Altri attributi importanti del tag “a” sono i seguenti:
- href – indica il percorso (relativo o assoluto) del documento collegato;
- name – permette di creare un’ancora interna alla pagina (segui un esempio più sotto), sistema di navigazione interno piuttosto utile per pagine dal contenuto piuttosto lungo;
- title – permette di visualizzare, al passaggio del mouse sul link, un’etichetta descrittiva ed utile anche all’indicizzazione dei contenuti del link sui motori di ricerca;
- target – consente di impostare un link verso un frame, specificando il nome del frame, oppure di aprire un link in una nuova finestra del browser specificando il valore predefinito _blank;
- rel – consente di indicare il tipo di relazione esistente tra il documento corrente e quello collegato; può avere diversi valori: i più utilizzati sono author (per indicare che il collegamento porta al sito dell’autore del documento corrente) e nofollow (per indicare ai motori di ricerca di non “seguire” il link);
- rev – consente di indicare una relazione inversa tra il documento corrente e quello linkato; funziona in modo simile a rel; ad esempio marcando un link con rev=”author” si indica che la pagina corrente riguarda l’autore del documento linkato;
- style – consente di applicare uno stile CSS “al volo” ad un singolo tag “a”;
- class – permette di assegnare una classe globale di stile a tutti i tag “a” che riportano il nome della classe.
Provate gli attributi descritti per verificarne la funzionalità. La comprensione di questi elementi può migliorare notevolmente la vostra abilità nella creazione di interfacce web più usabili e SEO-friendly.
Creare ancore interne al documento
Il tag “a”, come detto, non serve solo per saltare da una pagina all’altra! Grazie a una particolare sintassi è possibile, infatti, muoversi da un punto all’altro dello stesso documento specificando una o più ancore interne alla nostra pagina HTML. Questo è particolarmente utile per pagine lunghe in cui si desidera migliorare la navigabilità.
Per fare un esempio, il link:i
<a href="#pippo">Scorri fino a Pippo</a>ci porterà al punto “pippo” marcato, all’interno della stessa pagina che ospita il link qui sopra, in questo modo:
<a name="pippo">Io sono Pippo</a>Fate un test per verificare, ma per gustare l’effetto, ricordate di inserire una serie di ritorni a capo tra il primo ed il secondo tag “a”, in modo da permettere la visualizzazione della barra di scorrimento. Inoltre, per rendere la vostra navigazione ancora più interattiva, potete utilizzare gli eventi JavaScript per animare lo scorrimento fino all’ancora, migliorando l’esperienza utente.
In conclusione, il tag <a> di HTML è uno strumento fondamentale nella creazione di pagine web, non solo per il linking esterno ma anche per la gestione della navigazione interna. Comprendere e saper utilizzare i suoi attributi e funzioni vi permetterà di progettare esperienze utente più fluide e piacevoli.
