Link

Nell'introduzione alla sezione degli attributi, hai visto un esempio che mostra come vengono aggiunti gli attributi al tag di apertura. Nell'esempio è stato utilizzato il tag <a>, ma non sono stati illustrati né l'elemento né gli attributi specifici presentati:

L'anchor tag <a> e l'attributo href creano un link ipertestuale. I link sono la spina dorsale di internet. La prima pagina web conteneva 25 link, con scritto "Tutto ciò che c'è online su W3 è collegato direttamente o indirettamente a questo documento". Molto probabilmente tutto ciò che c'è online in W3 è collegato direttamente o indirettamente a questo documento.

La potenza del web e il tag <a> sono cresciute enormemente da quando Tim Berners-Lee ha pubblicato questa prima spiegazione nell'agosto del 1991. I link rappresentano una connessione tra due risorse, una delle quali è il documento corrente. I link possono essere creati da <a>, <area>, <form> e <link>. Hai imparato a conoscere <link> e scoprirai i moduli in una sezione separata. È disponibile anche un'intera sezione di apprendimento del modulo. In questa sessione, scoprirai il tag <a> a lettera singola, non così semplice.

Attributo href

Anche se non è obbligatorio, l'attributo href si trova in quasi tutti i tag <a>. Fornire l'indirizzo del link ipertestuale è ciò che trasforma <a> in un link. L'attributo href viene utilizzato per creare link ipertestuali a posizioni all'interno della pagina corrente, ad altre pagine di un sito o ad altri siti. Può anche essere codificato in modo da scaricare file o inviare un'email a un indirizzo specifico, includendo anche un oggetto e i contenuti suggeriti per il corpo dell'email.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Il primo link include un URL assoluto, che può essere utilizzato in qualsiasi sito al mondo per accedere alla home page di MLW. Gli URL assoluti includono un protocollo, in questo caso https://, e un nome di dominio. Se il protocollo è scritto semplicemente come //, si tratta di un protocollo implicito e significa che "utilizza lo stesso protocollo attualmente in uso".

Gli URL relativi non includono un protocollo o un nome di dominio. Sono "relativi" al file corrente. MLW è un sito di una sola pagina, ma questa serie HTML ha diverse sezioni. Per collegare questa pagina alla lezione sugli attributi, viene utilizzato un URL relativo <a href="../attributes/">Attributes</a>.

Il secondo link è semplicemente un identificatore di frammento di link e si collegherà all'elemento con id="teachers",, se presente, nella pagina corrente. I browser supportano anche due link "parte superiore della pagina": se fai clic su <a href="#top">Top</a> (senza distinzione tra maiuscole e minuscole) o semplicemente su <a href="#">Top</a>, l'utente scorrerà fino alla parte superiore della pagina, a meno che non vi sia un elemento con ID top impostato con le stesse lettere maiuscole e minuscole.

MLW è un documento piuttosto lungo. Per evitare lo scorrimento, puoi aggiungere nuovamente un link nella parte superiore dalla parte inferiore della sezione #teachers:

<a href="#top">Go to top.</a>

Il terzo link combina i due valori: contiene un URL assoluto seguito da un frammento di link. In questo modo è possibile creare un collegamento diretto a una sezione dell'URL definito, in questo caso la sezione #teachers della home page di MLW. Viene caricata la pagina MLW; quindi il browser scorrerà fino alla sezione Insegnanti senza inviare il frammento nella richiesta HTTP.

L'attributo href può iniziare con mailto: o tel: per inviare email o chiamate. La gestione del link dipende dal dispositivo, dal sistema operativo e dalle applicazioni installate.

Il link mailto non deve necessariamente includere un indirizzo email, ma può, insieme al testo cc, bcc, subject e body, precompilare l'email. Per impostazione predefinita, si apre un client di posta. Potresti precompilare l'oggetto e il corpo dell'email senza nessun indirizzo email, per consentire ai visitatori del sito di invitare i propri amici. Nel nostro link, nel piè di pagina del documento, includiamo l'URL della registrazione:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Il punto interrogativo (?) separa mailto: e l'indirizzo email, se presente, dal termine della query. All'interno della query, la e commerciale (&) separa i campi e i segni di uguale (=) equivalgono a ogni nome di campo con il relativo valore. L'intera stringa è codificata a percentuale, il che è assolutamente necessario se il valore href non è tra virgolette o se i valori includono virgolette.

L'app che viene aperta quando l'utente fa clic, tocca o preme Invio in un link tel dipende dal sistema operativo, dalle applicazioni installate e dalle impostazioni dell'utente sul dispositivo. Un iPhone potrebbe aprire FaceTime, l'app del telefono o i contatti. Un desktop Windows potrebbe aprire Skype, se installato.

Esistono molti altri tipi di URL, ad esempio blob e URL di dati (consulta gli esempi nella discussione sugli attributi download). Per i siti sicuri (pubblicati su https), è possibile creare ed eseguire protocolli specifici delle app con registerProtocolHandler().

Quando includi link che potrebbero aprire altre applicazioni installate, è bene informare l'utente. Assicurati che il testo tra i tag di apertura e chiusura indichi all'utente il tipo di link che sta per attivare. I selettori degli attributi CSS, come [href^="mailto:"], [href^="tel:"] e [href$=".pdf"], possono essere utilizzati per scegliere gli stili come target in base al tipo di applicazione.

Risorse scaricabili

L'attributo download deve essere incluso quando href rimanda a una risorsa scaricabile. Il valore dell'attributo di download è il nome file suggerito per la risorsa da salvare nel file system locale dell'utente. SVGOMG, lo strumento di ottimizzazione SVG, utilizza l'attributo download per suggerire un nome file per il blob scaricabile creato dallo strumento di ottimizzazione. Quando hal.svg viene ottimizzato, il tag di apertura del link di download di SVGOMG è simile al seguente:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

È disponibile anche una demo di <canvas> che crea un URL di dati PNG scaricabili.

Per collegarti a una risorsa scaricabile, includi l'URL dell'asset come valore dell'attributo href e il nome file suggerito che può essere utilizzato nel file system dell'utente come valore dell'attributo download.

Contesto di navigazione

L'attributo target consente di definire il contesto di navigazione per la navigazione tramite link (e l'invio modulo. Le quattro parole chiave, senza distinzione tra maiuscole e minuscole e con prefisso, sono state discusse con l'elemento <base>. Includono il valore predefinito _self, ovvero la finestra corrente, _blank, che apre il link in una nuova scheda, _parent, che è quella principale se il link corrente è nidificato in un oggetto o iframe, e _top, che è il predecessore di livello superiore, utile soprattutto se il link corrente è nidificato in modo profondo. _top e _parent sono uguali a _self se il link non è nidificato. L'attributo target non si limita a questi quattro termini chiave: è possibile utilizzare qualsiasi termine.

Ogni contesto di navigazione (in pratica, ogni scheda del browser) ha un nome di contesto di navigazione. I link possono aprire i link nella scheda corrente, in una nuova scheda senza nome o in una scheda con nome nuova o esistente. Per impostazione predefinita, il nome è la stringa vuota. Per aprire un link in una nuova scheda, l'utente può fare clic con il tasto destro del mouse e selezionare "Apri in una nuova scheda". Gli sviluppatori possono forzare questa operazione includendo target="_blank".

Un link con target="_blank" verrà aperto in una nuova scheda con nome nullo, aprendo una nuova scheda senza nome a ogni clic sui link. In questo modo è possibile creare molte nuove schede. Troppe schede. Ad esempio, se l'utente fa clic su <a href="registration.html" target="_blank">Register Now</a> 15 volte, il modulo di registrazione verrà aperto in 15 schede separate. Questo problema può essere risolto fornendo un nome contesto per la scheda. Se includi l'targetattributo con un valore sensibile alle maiuscole, ad esempio <a href="registration.html" target="reg">Register Now</a>, il primo clic su questo link aprirà il modulo di registrazione in una nuova scheda reg. Se fai clic su questo link altre 15 volte, la registrazione viene ricaricata nel contesto di navigazione di reg, senza aprire altre schede.

L'attributo rel controlla i tipi di collegamenti creati dal link e definisce la relazione tra il documento corrente e la risorsa a cui rimanda il link ipertestuale. Il valore dell'attributo deve essere un elenco separato da spazi su uno o più punteggio dei valori dell'attributo rel supportati dal tag <a>.

La parola chiave nofollow può essere inclusa se non vuoi che gli spider seguano il link. Puoi aggiungere il valore external per indicare che il link indirizza a un URL esterno e non a una pagina all'interno del dominio corrente. La parola chiave help indica che il link ipertestuale fornirà una guida sensibile al contesto. Se passi il mouse sopra un link con questo valore rel, verrà visualizzato un cursore della guida anziché il normale cursore puntatore. Non utilizzare questo valore solo per ottenere il cursore della guida; utilizza invece la proprietà cursor CSS. I valori prev e next possono essere utilizzati nei link che rimandano al documento precedente e successivo di una serie.

Analogamente a <link rel="alternative">, il significato di <a rel="alternative"> dipende da altri attributi. Le alternative ai feed RSS includeranno anche type="application/rss+xml" o type="application/atom+xml, i formati alternativi includeranno l'attributo type e le traduzioni includeranno l'attributo hreflang. Se i contenuti tra il tag di apertura e quello di chiusura sono in una lingua diversa da quella del documento principale, includi l'attributo lang. Se la lingua del documento con link ipertestuale è in un'altra lingua, includi l'attributo hreflang.

In questo esempio, includiamo l'URL della pagina tradotta come valore di href, rel="alternate" per indicare che si tratta di una versione alternativa di un sito; l'attributo hreflang fornisce la lingua delle traduzioni:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Se la traduzione francese è un PDF, puoi fornire l'attributo type con il tipo MIME PDF della risorsa collegata. Sebbene il tipo MIME sia puramente informativo, è sempre consigliabile informare l'utente che un link aprirà un documento di un formato diverso.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Clic sui link di monitoraggio

Un modo per monitorare le interazioni degli utenti è inviare un ping a un URL quando viene fatto clic su un link. L'attributo ping, se presente, include un elenco separato da spazi di URL protetti (che inizia con https) per i quali è necessario inviare una notifica o inviare un ping se l'utente attiva il link ipertestuale. Il browser invia richieste POST con corpo PING agli URL elencati come valore dell'attributo ping.

Suggerimenti per l'esperienza utente

• Tieni sempre in considerazione l'esperienza utente quando scrivi il codice HTML. I link devono fornire informazioni sufficienti sulla risorsa collegata affinché l'utente sappia su cosa sta facendo clic.
• All'interno di un blocco di testo, assicurati che l'aspetto dei link sia sufficientemente diverso dal testo circostante in modo che gli utenti possano identificare facilmente i link dal resto dei contenuti e assicurandoti che il colore da solo non sia l'unico mezzo per distinguere il testo dai contenuti circostanti.
• Includi sempre gli stili di attivazione/disattivazione; in questo modo, le navigazioni da tastiera possono sapere dove si trovano quando ti sposti tra i contenuti.
• I contenuti tra il <a> di apertura e la </a> di chiusura sono il nome accessibile predefinito del link e devono indicare all'utente la destinazione o lo scopo del link. Se i contenuti di un link sono immagini, la descrizione alt è il nome accessibile. Se il nome accessibile proviene dall'attributo alt o da un sottoinsieme di parole all'interno di un blocco di testo, assicurati che fornisca informazioni sulla destinazione del link. Il testo dei link dovrebbe essere più descrittivo di "fai clic qui" o "ulteriori informazioni"; ciò è importante per gli utenti di screen reader e per i risultati del tuo motore di ricerca.
• Non includere contenuti interattivi, come <button> o <input>, all'interno di un link. Non nidificare un link all'interno di un elemento <button> o <label>. Anche se la pagina HTML continuerà a essere visualizzata, la nidificazione di elementi attivabili e cliccabili all'interno di elementi interattivi crea un'esperienza utente negativa.
• Se è presente l'attributo href, premi il tasto Invio mentre è attivo l'elemento <a> per attivarlo.
• I link non sono limitati al codice HTML. L'elemento a può essere utilizzato anche all'interno di un file SVG, formando un link con gli attributi "href" o "xlink:href".

Link e JavaScript

L'attributo links restituisce un elemento HTMLCollection corrispondente a e area che hanno un attributo href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

In questa sezione hai appreso tutto sui link. La prossima sezione riguarda gli elenchi. Dobbiamo saperne di più per raggrupparli in modo da creare elenchi di link (noti anche come navigazione).

Verifica la tua comprensione

Verifica la tua conoscenza dei link.