HTML: il tag <a>

Il tag HTML <a> definisce un’ancora: possiamo dunque utilizzarlo sia per creare dei link a documenti o pagine esterne (attraverso l’attributo href) che per inserire uno o più collegamenti all’interno della stessa pagina (attraverso l’attributo name ).

Utilizzo del tag <a> per creare un collegamento ipertestuale

La sintassi di un link esterno è molto semplice e si presenta così:

<a href="indirizzodelsitodalinkare.it">Testo che linka al sito</a>

Facciamo un esempio un po’ più completo:

<a href="https://www.yourinspirationweb.com">Visita la community sul web design</a>

In questo modo cliccando sul testo racchiuso tra l’apertura e la chiusura del tag <a> verrà creato un collegamento all’indirizzo url inserito dopo l’attributo href .

Utilizzo del tag <a> per aggiungere un collegamento ipertestuale ad un’immagine

Nello stesso modo, nel caso si voglia rendere linkabile un’immagine piuttosto che del contenuto testuale, basterà caricare l’immagine all’interno del tag <a>, come puoi vedere nell’esempio seguente:

<a href="https://www.yourinspirationweb.com"><img src=”logo.jpg”></a>

Con questa sintassi, cliccando sull’immagine logo.jpg verrà creato un collegamento alla nostra community.

Utilizzo del tag <a> per creare un collegamento interno

La procedura di utilizzo del tag <a> per creare un collegamento interno (un’àncora) si suddivide in due fasi.

Nella prima fase inseriamo l’àncora alla “destinazione”, ovvero alla risorsa (che può essere un capitolo, un paragrafo, o altro) che vogliamo raggiungere grazie al link interno.

La sintassi è la seguente:

<a name="nomeancora">Iniziamo oggi una nuova guida sulla progettazione di un sito web</a>

Il secondo step consiste nel richiamare l’àncora appena inserita, aggiungendo nella posizione desiderata un link che punti ad essa:

<a href="#nomeancora">Segui il nuovo corso di progettazione web di YIW</a>

In questo modo con un solo click sul testo Segui il nuovo corso di progettazione web di YIW l’utente verrà direzionato verso l’àncora #nomeancora a cui esso fa riferimento.

Esempi di utilizzo del tag <a>

Ecco alcuni esempi di utilizzo del tag <a>

Gli attributi del tag <a>

Attributi richiesti

Nessuno.

Attributi opzionali

DTD (Document Type Definition, Definizione del tipo di documento): indica in quali Doctype il tag è consentito. S=Strict, T=Transitional e F=Frameset.

Il tag <a> supporta i seguenti attributi opzionali:

Attributo Valore Descrizione DTD
charset codice carattere Specifica il set di caratteri per l’elemento linkato STF
coords coordinate Specifica le coordinate del link STF
href URL Specifica la destinazione del link STF
hreflang codice lingua Può essere utilizzato per specificare la lingua del documento linkato STF
name nome sezione Specifica il nome di un’àncora STF
rel testo Specifica la relazione esistente tra il documento corrente e il documento linkato STF
rev testo Specifica la relazione esistente tra il documento linkato e il documento corrente STF
shape default
rect
circle
poly
Specifica la forma del link STF
target _blank
_parent
_self
_top
framename
Specifica dove verrà aperto il documento linkato TF

Attributi standard

DTD (Document Type Definition, Definizione del tipo di documento): indica in quali Doctype il tag è consentito. S=Strict, T=Transitional e F=Frameset.

Il tag <a> supporta i seguenti attributi standard:

Attributo Valore Descrizione DTD
accesskey carattere Specifica una scorciatoia da tastiera per accedere ad un elemento STF
class nome classe Specifica il nome di una classe per un elemento. STF
dir ltr
rtl
Specifica la direzione del testo all’interno di un elemento. STF
id id Specifica un id univoco per un elemento. STF
lang codice lingua Può essere utilizzato per indicare il codice della lingua con cui è scritta l’abbreviazione. STF
style definizione stile Specifica uno stile in linea per un elemento. STF
tabindex numero Specifica l’ordine di tabulazione per un elemento. STF
title testo Può essere utilizzato per fornire la forma completa o espansa dell’abbreviazione. STF
xml:lang linguaggio codice Può essere utilizzato per indicare il codice della lingua con cui è scritta l’abbreviazione in un documento XHTML STF

Browser supportati

Il tag <a> è supportato da tutti i maggiori browser.

Firefox Safari Chrome Opera IE 8 IE 7 IE 6
SI SI SI SI SI SI SI
Tag: , ,

L'autore

Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • HTML: Il tag <form>

    Il tag HTML <form> definisce un modulo HTML per l'input dell'utente. Definizione e utilizzo Il tag HTML <form> può contenere...

  • HTML: Il tag <em>

    Il tag HTML <em> permette di formattare una parte di testo in corsivo. Definizione e utilizzo Il tag <em>, insieme ai tag...

  • HTML: Il tag <dl>

    Il tag HTML <dl> serve a creare una lista di definizioni. Definizione e utilizzo Il tag <dl> viene utilizzato per creare una lista di...