HTML: il tag <a>
Commenti disabilitati su 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 |
L'autore
