Una parte fondamentale del web sono i link, i quali permettono di collegare l’utente con varie risorse, le quali possono essere altri documenti o qualsiasi altra cosa che un URL può indicare.
In questo approfondimento vedremo più nel dettaglio quali le caratteristiche del tag <a>
, il tag che usiamo per poter creare i link, da non confondere con <link>
che abbiamo già trattato ampiamente nella lezione dedicata alla head del documento HTML.
Il tag <a>
o elemento ancora (anchor in inglese) insieme al suo attributo href
permette di creare un hyperlink (più comunemente noto come link o, per essere più vintage, collegamento ipertestuale) tra due documenti o altre risorse come file, email, numero di telefono o qualsiasi altra cosa un URL possa indicare.
1<a href=”https://www.manuelricci.com”>Imparare Coding con Manuel</a>
Il contenuto dell’elemento è il testo che verrà usato dall’utente per raggiungere la destinazione attraverso un click.
I possibili URL di href
Come già menzionato in precedenza il valore di href
può essere in sostanza qualsiasi cosa un URL possa indicare.
URL relativi e assoluti
Gli URL possono essere relativi e assoluti. Gli assoluti sono quelli che riportano per interno tutto l’URL, come ad esempio
1<a href=”https://www.manuelricci.com”>Imparare Coding con Manuel</a>
Gli URL relativi sono di tre tipi: scheme-relative, origin-relative e directory-relative; in sostanza ad ognuno manca un pezzo dell’URL assoluto, come ad esempio:
1<a href=”//www.manuelricci.com”>Schema Relative</a>
2<a href=”/”>Origin Relative</a>
3<a href=”./pagina”>Directory relative</a>
Ancoraggi interni
Un link può anche puntare ad un elemento all’interno della pagina, questo tipo di link sono chiamati ancoraggi interni e il meccanismo è molto semplice. All’interno della pagina c’è una sezione con uno specifico id
, attributo globale disponibile in tutti i tag HTML. L’URL del link (anche in questo caso può essere relativo o assoluto) punterà a questo id
attraverso l’uso di una particolare parte degli URL, il frammento. Il frammento è quello che possiamo distinguere grazie al cancelletto (#
).
Un ancoraggio interno è quindi possibile crearlo come segue:
1<a href=”#commenti”>Vai ai commenti</a>
2<!-- Più in basso nella pagina -->
3<h2 id=”commenti”>Ci sono 3 commenti</h2>
Link ad un indirizzo email
Attraverso un apposita sintassi possiamo linkare il nostro link ad un indirizzo email, il browser aprirà il client di posta predefinito e riempirà la parte del destinatario con l’indirizzo specificato.
Per creare un link ad un indirizzo email basta scrivere:
1<a href=”mailto:info@manuelricci.com”>Scrivimi una mail</a>
Link ad un numero di telefono
Simile a quanto visto con mailto
possiamo anche linkare un numero di telefono.
1<a href=”tel:+393333333333”>Chiamami</a>
Questo tipo di link agisce in modo differenti in base a dove viene aperto.
- Se cliccato su dispositivi mobili aprirà il dialer delle chiamate e potrete pigiare la cornetta per far partire la chiamata.
- Se cliccato da desktop vi chiederà se volete inviarlo ad un dispositivo o se avete configurato Skype o FaceTime vi chiederà se volete aprirlo con questi software
L’attributo hreflang
L’attributo hreflang
in maniera molto simile a ciò che fa il già visto lang
permette di indicare in che lingua è scritto il documento linkato.
L’attributo download di anchor
Comunica al browser di scaricare la risorsa linkata.
Per quanto il browser determini da solo il nome del file da scaricare, può essere impostato uno specifico con l’ausilio dell’attributo filename
.
Il browser convertirà in automatico al momento del download eventuali caratteri non permessi, come gli slash trasformandoli in underscore.
Il download di per sé viene gestito in maniera diversa dai vari browser e in base altri fattori come le impostazioni utente. Questo significa che l’utente potrebbe visualizzare la richiesta di conferma della destinazione del download, oppure può avvenire tutto automaticamente.
L’attributo referrerpolicy
Questo attributo l’abbiamo già visto in passato e anche in questo caso permette di configurare quali informazioni devono essere passate alla risorsa linkata attraverso all’header HTTP Refer.
I valori di questo attributo spaziano da soluzioni stringenti a soluzioni estremamente permissive, talmente tanto permissive che la loro natura insicura è riportata nel nome stesso del valore.
I valori possibili sono:
no-referrer
: nessuna informazione verrà trasmessano-referrer-when-downgrade
: le informazioni vengono trasmesse solo nel caso di connessione sicuraorigin
: le informazioni sono limitate a schema (http o https), host (dominio) e porta (80 o 443)origin-when-cross-origin
: le informazioni vengono limitate con inorigin
, ma la navigazione tra documenti dello stessa origine (stesso sito) contengono anche il percorso dell’URLsame-origin
: solo le pagine appartenenti allo stesso host ricevono informazioni, tutte le altre no.strict-origin
: comesame-origin
, ma solo se il protocollo rimane identicostrict-origin-when-cross-origin
(default): mix trastrict-origin
eorigin-when-cross-origin
.unsafe-url
: tutte le informazioni ad esclusione di frammenti, password e username vengono inviate.
L’attributo rel
rel
per il tag <a>
ha alcuni valori identici a quelli di <link>
, mentre altri sono da usare esclusivamente con <a>
, come ad esempio:
- nofollow: per contrastare lo SPAM originato da attività poco lecite da parte di moltissimi marketer che cercavano di accaparrarsi centinaia di link commentando sui blog o attività simili. Nel 2005 Google ha introdotto questo valore di
rel
per comunicare ai crawler che il link non doveva essere seguito e di conseguenza non doveva essere data importanza alla pagina linkata. Il discorso dei link nell’ottimizzazione per motori di ricerca è molto importante ed esteso. - noopener: mentre oggi i browser impostano di default questo valore, qualche tempo fa era consigliato usare questo valore di
rel
per evitare che la pagina linkata avesse il controllo della pagina di origine. Questo tipo di attacco si chiama tab nabbing - noreferrer: come già visto per
referrerpolicy
questo valore evitare che l’header HTTP Refer venga compilato.
Più recenti invece sono due nuovi valori proposti sempre da Google nel 2019:
- ugc: contenuto generato dall’utente (User Generated Content) di cui non ci si bisogna per forza fidare perché non è stato inserito dall’autore del documento
- sponsored: identifica link frutto di una sponsorizzazione, pubblicità e simili
Entrambi proposti da Google nel 2019 sono utili a contrassegnare rispettivamente:
L’attributo target
target è un attributo che oggi si usa molto per indicare se aprire il link nella stessa o in una nuova scheda del browser.
I valori possibili sono:
- _self (default)
- _blank: nuova scheda
- _parent: nel caso di frame annidati il link si aprirà nel frame genitore
- _top: anche nel caso di frame annidati il link si aprirà nella scheda principale
Questi ultimi due sono molto meno frequenti perché non si sviluppa più in frame come accadeva in passato.
Accessibilità dei link
Per quanto riguarda il fattore accessibilità, con i link bisogno tenere a mente giusto tre cosine:
- Evitare di usare parole come clicca qui o simili, gli screen reader potrebbero raccogliere tutti i link della pagina e presentarli in maniera tale che siano più facilmente consultabili, ma se questi sono privi di significiato l'operazione è inutile
- Renderli sempre visivamente distinguibili dal resto del contenuto, un link si deve riconoscere dalla distanza
- Non usare come testo del link un URL, altrimenti gli screen reader lo leggeranno scandendo ogni singola lettera.
Caricamento...
Diventiamo amici di penna? ✒️
Iscriviti alla newsletter per ricevere una mail ogni paio di settimane con le ultime novità, gli ultimi approfondimenti e gli ultimi corsi gratuiti puubblicati. Ogni tanto potrei scrivere qualcosa di commerciale, ma solo se mi autorizzi, altrimenti non ti disturberò oltre.
Se non ti piace la newsletter ti ricordo la community su Discord, dove puoi chiedere aiuto, fare domande e condividere le tue esperienze (ma soprattutto scambiare due meme con me). Ti aspetto!