back to top

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.

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.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico è una collezione di pagine web...
Pubblicità