Collegare due documenti HTML

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à trasmessa
• no-referrer-when-downgrade: le informazioni vengono trasmesse solo nel caso di connessione sicura
• origin: 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 in origin, ma la navigazione tra documenti dello stessa origine (stesso sito) contengono anche il percorso dell’URL
• same-origin: solo le pagine appartenenti allo stesso host ricevono informazioni, tutte le altre no.
• strict-origin: come same-origin, ma solo se il protocollo rimane identico
• strict-origin-when-cross-origin (default): mix tra strict-origin e origin-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.