Il tag "a" ed i suoi attributi - Imparare l'HTML

Indice dei contenuti

Nel seguente articolo imparerai ad impostare il tag <a> del linguaggio HTML ed a configurare i suoi attributi principali e più importanti in un ottica SEO.

In questo nuovo articolo della serie “Imparare l’HTML“, il nostro corso per principianti orientato all’insegnamento del linguaggio HTML (5) e CSS, vedremo come impostare in maniera corretta il tag per i collegamenti ipertestuali o tag “a“ insieme ai suoi attributi principali, che ci aiuteranno a definire meglio l’identità e il comportamento di questi collegamenti e dei link che contengono.

Ora vediamo in breve una descrizione del tag HTML <a>.

Esercitati con il nostro editor HTML online WYSIWYG. Creato da BytePost per te ed i tuoi siti.

Il tag <a>

Descrizione

Il tag <a> è tra i principali tag HTML utilizzati, e fa parte della lista dei tag di base da imparare assolutamente durante lo studio di questo linguaggio.

Il tag <a> è tra i più utilizzati durante la creazione di siti e pagine web, perché consente di collegare tramite link, altre pagine interne dello stesso sito o siti web esterni. Ma ha anche altre funzioni meno comuni ed utili da un punto di vista gestionale e pratico.

Infatti il tag HTML in questione è utile anche per costruire una rete di collegamenti interni alla stessa pagina, aiutando i visitatori ad orientarsi tra i contenuti. Oppure un altra funzione utile del tag <a> è rendere possibile il download dei file. A tal proposito leggi l’articolo dedicato cliccando qui.

Sintassi

l’impostazione del tag <a> è semplice, basterà richiamare gli appositi tag di apertura e di chiusura in cui inserire l’URL interessato (sia interno che esterno al sito) ed il testo da visualizzare a schermo.

Il tag <a> va inserito nel tag <body>, essendo un elemento con cui bisogna interagire. Per linkare risorse esterne (come fogli di stile CSS) usa il tag (apre in una nuova scheda)”><link>.

Un esempio:

<a href="https://www.byte-post.com">Visita BytePost</a>

Visita BytePost

Esaminando il codice, gli elementi che compongono l’intero tag a sono pochi:

tag di apertura <a…
attributo href=”..” per dichiarare il collegamento
URL (www.byte-post.com)
Testo visualizzato (Visita BytePost)
tag di chiusura </a>

Questa è la struttura di base con cui scrivere un tag <a> per i collegamenti ipertestuali.

Attributi

Come viso nel precedente esempio, la configurazione di base del tag <a> è molto semplice e facile da scrivere. Però per ottimizzare la visualizzazione, la comprensione e l’elaborazione del tag è importante integrare alcuni attributi secondari, che così come “href“, sono fondamentali da conoscere.

Ora vedremo una lista dei più comuni.

title

L’attributo title è molto simile a quello del tag img e di altri tag HTML e fondamentalmente ha la stessa funzione di dichiarare il titolo dell’oggetto, in questo caso del link/collegamento.

Questo attributo definisce il titolo del collegamento e aiuta a comprendere meglio la natura del link o a fornire una loro breve descrizione. Utile soprattutto per testi indiretti come il classico “Clicca qui“.

Il codice è il seguente:

<a href="www.byte-post.com" title="Visita la home page di BytePost">Clicca qui</a>

Per visualizzare il titolo del collegamento contenuto in una pagina web ti basterà spostare il cursore del mouse al di sopra del link senza cliccare ed aspettare 1 secondo per la comparsa del testo.

name

L’attributo name, simile ad altri tag HTML, specifica il nome dell’oggetto. Nel caso del tag <a> questo attributo non viene visualizzato direttamente ai visitatori,

Questo attributo consente di determinare i collegamenti interni, nella pagina (simile all’indice dei contenuti presente all’inizio di questa pagina, o lo strumento “go to top” per tornare in alto).

La costruzione di questi link con il tag <a> e l’attributo name è divisa in due passaggi, segui la seguente procedura per definirne uno:

Scegli la sezione di testo o un preciso punto nel codice in cui inserire l’ancora e scrivi il tag in questo modo:

<a name="attributi"><h3>Attributi</h3></a>

Ora scegli la posizione del link, in genere distante dal precedente e inserisci il codice di collegamento

<a href="#attributi">Torna al capitolo Attributi</a>

Clicca per provare: Torna al capitolo Attributi

download

Già dal titolo, questo attributo del tag <a> in HTML consente di effettuare il download di un file a scelta cliccando sul collegamento.

Per configurarlo ti basterà digitare l’URL del file all’interno dell’attributo href=”” e inserire il secondo attributo download per dichiarare la tipologia.

Esempio:

<a href="albero.jpg" download="abete"> Scarica la foto di un albero </a>

Puoi determinare il nome del file che verrà scaricato inserendolo nelle virgolette dell’attributo download. Nell’esempio precedente verrà scaricata un’immagine nominata abete.jpg e non albero.jpg.

target

L’attributo target specifica come verrà aperto il collegamento dopo il click. Questo verrà determinato dal valore immesso nelle virgolette.

L’uso più comune è per l’apertura di un link in una nuova scheda del browser con il valore “_blank“. Clicca qui per capirne il funzionamento (verrà aperta la home page di BytePost in una nuova scheda del tuo browser.

I valori più comuni sono i seguenti:

_blank – Apre in una nuova scheda o tab del browser;
_self – Valore di default, apre nella stessa scheda o frame, abbandonando la vista corrente.
_parent – Sostituisce la vista corrente, anche in caso di frame.

La sintassi:

<a href="www.byte-post.com" target="_blank"> Visita BytePost </a>

rel

Questo attributo specifica il rapporto tra le due pagine collegate, è importante impostarlo specialmente per il link in uscita (verso altri siti web), perché ciò può influenzare la SEO e la condivisione di valore tra le pagine.

Anche qui sono disponibile differenti valori:

nofollow – Istruisce gli spider dei motori di ricerca in modo che non seguano la pagina linkata e i collegamenti contenuti. (il tag <a> è di default “dofollow”, cioè il contrario, ricordati di specificare sempre questo attributo).
noopener – vincolato al valore target=_blank visto in precedenza. In ambito di sicurezza questo tag si assicura che la pagina indirizzata non possa influenzare e controllare la pagina di provenienza.
noreferrer – Questo attributo servirà a non comunicare la sorgente referral di provenienza.

Nel caso di target=”_blank” è consigliato inserire tutti i precedenti valori nell’attributo rel=”….”.

Sintassi:

<a href="www.google.com" target="_blank" rel="noreferrer noopener nofollow"> Visita Google</a>

Problemi con il tag <a> e i suoi attributi? Faccelo sapere nei commenti!

Iscriviti alla nostra Newsletter per restare aggiornato sul corso Imparare l’HTML e seguici su Facebook.

Articoli Recenti:

Il tag “a” ed i suoi attributi – Imparare l’HTML