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>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:
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
- Come Risolvere i Problemi di Connessione Bluetooth al PC
- Guida alla Cybersecurity: Come proteggerti da minacce informatiche
- Come Aggiungere un Dizionario su App Kindle
