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.
La sintassi è la seguente:
<a href="pippo.html">Pippo</a>
Ai fini della validazione XHTML è necessario specificare l’attributo "title".
<a href="pippo.html" title="Pagina di Pippo">Pippo</a>
A video verrà visualizzata la scritta "Pippo" cliccabile col tasto sinistro del mouse; al click l’utente verrà rimandato alla pagina specificata nell’attributo obbligatorio href in cui è specificabile, appunto, 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 (segue 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à.
Creare ancore interne al documento
Il tag "a", come detto, non serve solo per saltare da una pagina all’altra! Grazie ad una particolare sintassi è possibile, infatti, muoversi da un punto all’altro dello stesso documento specificando una o più ancore interne alla nostra pagina HTML.
Per fare un esempio, il link:
<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.