Nell'introduzione agli attributi, abbiamo condiviso un esempio di come gli attributi vengono
aggiunti al tag di apertura. L'esempio utilizzava il tag <a>, ma non sono stati discussi né l'elemento né gli attributi specifici introdotti in quell'esempio.
Il tag di ancoraggio <a>, insieme all'attributo href, crea un link ipertestuale. I link
sono la spina dorsale di internet. La
prima pagina web
conteneva 25 link con la dicitura "Tutto ciò che esiste online su W3 è collegato
direttamente o indirettamente a questo documento". Con ogni probabilità, tutto ciò che è
online su W3 è collegato direttamente o indirettamente anche da questo documento.
La potenza del web e del tag <a> sono cresciute enormemente da quando Tim Berners-Lee ha pubblicato questa prima spiegazione nell'agosto 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. Esiste anche un'intera sezione di apprendimento dei moduli. In questa sessione, scoprirai il tag <a>, una sola lettera, ma non così semplice.
Attributo href
Sebbene non sia obbligatorio, l'attributo href si trova in quasi tutti i tag <a>. Fornire l'indirizzo del link ipertestuale 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 per scaricare file o per inviare un'email
a un indirizzo specifico, includendo anche un oggetto e il contenuto del corpo dell'email suggerito.
<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 su 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. Quando il protocollo è scritto come //, è un protocollo implicito e significa "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 creare un link da questa pagina alla lezione sugli attributi, viene utilizzato un URL relativo <a href="../attributes/">Attributes</a>.
Il secondo link è solo un identificatore di frammento di link e rimanda all'elemento con id="teachers",, se presente, nella pagina corrente. I browser supportano anche due link "Inizio pagina": se fai clic
su <a href="#top">Top</a> (senza distinzione tra maiuscole e minuscole) o anche solo su <a href="#">Top</a>, l'utente torna all'inizio della pagina,
a meno che non sia presente un elemento con l'ID top impostato con la stessa distinzione tra maiuscole e minuscole.
MLW è un documento piuttosto lungo. Per evitare di scorrere, puoi aggiungere un link che riporta in alto dalla parte inferiore della sezione #insegnanti:
<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 collegarsi direttamente a una sezione dell'URL definito,
in questo caso, la sezione #teachers della home page di MLW. La pagina MLW viene caricata e il browser scorre fino alla sezione degli insegnanti, senza inviare il frammento nella richiesta HTTP.
L'attributo href può iniziare con mailto: o tel: per inviare email o effettuare chiamate.
La gestione del link dipende dal dispositivo, dal sistema operativo e dalle applicazioni installate.
Il link mailto non deve includere un indirizzo email, ma può farlo, insieme a cc, bcc, subject e body per precompilare l'email. Per impostazione predefinita, viene aperto un client di posta. Puoi precompilare l'oggetto e il corpo dell'email senza
indicare un indirizzo email, per consentire ai visitatori del sito di invitare i propri amici. Nel 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 di ricerca. All'interno della query,
le e commerciali (&) separano i campi e i segni di uguale (=) equiparano ogni nome di campo al suo valore. L'intera stringa è
codificata in percentuale, il che è assolutamente necessario se il valore di href non è racchiuso tra virgolette o se i valori includono virgolette.
L'app che viene aperta quando l'utente fa clic, tocca o preme Invio su un link tel dipende dal sistema operativo,
dalle applicazioni installate e dalle impostazioni del dispositivo. Un iPhone potrebbe aprire FaceTime, l'app Telefono o i contatti.
Se installato, su un desktop Windows potrebbe aprirsi Skype.
Esistono diversi altri tipi di URL, come i blob e gli URL dati (vedi gli esempi nella discussione sull'attributo download).
Per i siti sicuri (quelli pubblicati su https), è possibile creare ed eseguire protocolli specifici per le app con registerProtocolHandler().
Quando includi link che probabilmente apriranno altre applicazioni installate, è consigliabile 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 di attributi CSS, come [href^="mailto:"], [href^="tel:"] e [href$=".pdf"], possono essere utilizzati per scegliere come target gli stili 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 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 è ottimizzato, il tag di apertura del link di download di SVGOMG è simile a:
<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">
Esiste anche una demo di un <canvas> che crea un URL dei dati PNG scaricabile.
Per creare un link a una risorsa scaricabile, includi l'URL dell'asset come valore dell'attributo href e un nome file suggerito per l'utente come valore dell'attributo download.
Contesto di navigazione
L'attributo target consente di definire il contesto di navigazione per la navigazione dei link (e l'invio del modulo). Le quattro parole chiave
senza distinzione tra maiuscole e minuscole e con il prefisso del trattino basso sono state discusse con l'elemento
<base>. È incluso quanto segue:
- (Predefinito)
_self: apre il link nella finestra corrente. _blank: apri il link in una nuova scheda._parent: Apri il link nell'oggetto principale o nell'iframe._top: Apri il link nell'elemento principale di primo livello. Questa funzionalità è particolarmente utile se il link è nidificato in profondità.
Se il link non è nidificato, _top e _parent si comportano come _self. L'attributo
target non è limitato a questi quattro termini chiave: può essere utilizzato qualsiasi termine.
Ogni contesto di navigazione (o ogni scheda del browser) ha un nome. I link possono essere aperti 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 forzarlo includendo target="_blank".
Un link con target="_blank" si apre in una nuova scheda con un nome nullo, aprendo una
nuova scheda senza nome a ogni clic sul link. In questo modo, possono essere create 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 si aprirà in 15 schede separate. Questo problema può essere risolto
fornendo un nome di contesto della scheda. Se includi l'attributo target con un valore sensibile alle maiuscole, ad esempio <a href="registration.html" target="reg">Register Now</a>, il primo clic aprirà il modulo di registrazione in una nuova scheda reg. Se fai clic su questo link altre 15 volte,
la registrazione verrà ricaricata nel contesto di navigazione reg, senza aprire
schede aggiuntive.
L'attributo rel controlla i tipi di link creati, definendo la relazione tra il documento corrente e la risorsa collegata nell'hyperlink. Il valore dell'attributo deve essere un elenco separato da spazi di uno o più
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. Il valore external può essere aggiunto 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, vedrai un cursore di aiuto anziché il normale cursore del puntatore.
Non utilizzare questo valore solo per ottenere il cursore di aiuto; utilizza invece la proprietà CSS cursor. 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 al 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 i tag di apertura e chiusura sono in una lingua diversa da quella principale del documento, includi l'attributo lang.
Se la lingua del documento con collegamento ipertestuale è diversa, 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 in francese è un PDF, puoi fornire l'attributo type con il tipo MIME PDF della risorsa collegata. Sebbene il tipo MIME sia puramente consultivo, informare l'utente che un link aprirà un documento di un formato diverso è sempre una buona idea.
<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>
Monitorare i clic sui link
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 sicuri (che iniziano con https) che devono essere notificati o pingati se l'utente attiva l'hyperlink. Il browser invia richieste POST con il corpo PING agli URL elencati come valore dell'attributo ping.
Suggerimenti per l'esperienza utente
- Quando scrivi codice HTML, tieni sempre presente l'esperienza utente. I link devono fornire informazioni sufficienti sulla risorsa collegata in modo che l'utente sappia su cosa sta facendo clic.
- All'interno di un blocco di testo, l'aspetto dei link deve differire a sufficienza dal testo circostante, in modo che gli utenti possano identificare più facilmente i link dagli altri contenuti. Utilizza più indicatori visivi, come il colore e una sottolineatura. Il colore da solo non è sufficiente.
- Includi sempre gli stili di messa a fuoco. In questo modo, gli utenti che navigano con la tastiera sanno dove si trovano quando scorrono i contenuti con il tasto Tab.
- I contenuti tra il tag di apertura
<a>e quello di chiusura</a>sono il nome accessibile predefinito del link e devono informare l'utente della destinazione o dello scopo del link. Se i contenuti di un link sono un'immagine, la descrizionealtè il nome accessibile. Il testo del link e il testoaltdevono essere più descrittivi di "fai clic qui" o "maggiori informazioni". ma deve fornire all'utente informazioni sulla pagina a cui viene indirizzato quando il link viene attivato. Questo è fondamentale per gli utenti di screen reader e per i risultati dei motori di ricerca. - Non includere contenuti interattivi, come un
<button>o un<input>, all'interno di un link. Inoltre, non incorporare un link all'interno di un<button>o<label>. Sebbene la pagina HTML venga comunque visualizzata, l'annidamento di elementi selezionabili e cliccabili all'interno di elementi interattivi crea un'esperienza utente negativa. - Se è presente l'attributo
href, premendo il tasto Invio mentre lo stato attivo è impostato sull'elemento<a>, quest'ultimo verrà attivato. - I link non sono limitati all'HTML. L'elemento
apuò essere utilizzato anche all'interno di un SVG, formando un link con gli attributi "href" o "xlink:href".
Link e JavaScript
L'attributo links restituisce un HTMLCollection corrispondente agli elementi 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 imparato tutto sui link. La sezione successiva riguarda gli elenchi, che dobbiamo imparare per creare elenchi di link, noti anche come navigazione.
Verifica la tua comprensione
Metti alla prova le tue conoscenze sui link.
Cosa fa il link nofollow?
Quali link ti portano all'inizio della pagina?
#start##top