Link HTML: ancore, pulsanti, immagini e nuove schede
Guida ai link HTML
Link HTML: ancore, link come pulsanti, link su immagini, nuove schede | We.Inc
Crea link HTML che funzionano: link ad ancore con scroll fluido sotto un header sticky, nuove schede, link con l'aspetto di pulsanti, link su immagini, link mailto, tel e di download.
Un link HTML è un elemento <a> con un href: <a href="/pricing">See pricing</a>. Fai puntare href a una pagina, a #id per saltare a un punto della pagina, oppure a mailto: e tel: per avviare un'email o una chiamata. Aggiungi target="_blank" per aprire una nuova scheda, e usa un <button>, non un link, per le azioni che modificano qualcosa.
Tutti i tipi di link di cui ha bisogno un piccolo sito, ognuno con codice modificabile e un risultato dal vivo. La demo dei link ad ancora mostra il problema dell'header sticky e la sua soluzione in una riga, e la sezione sui pulsanti chiarisce quando un link deve sembrare un pulsante e quando deve esserlo davvero.
Scegli dalle sezioni qui sotto il tipo di link che ti serve.
Modifica l'esempio. Il riquadro del risultato è una vera pagina, quindi i link ad ancora scorrono e gli indicatori di focus compaiono quando premi Tab.
Copia lo snippet e sostituisci l'indirizzo e il testo del link con i tuoi.
Verifica che il testo del link si capisca da solo, perché chi usa uno screen reader spesso scorre un elenco di link senza le parole attorno.
Scrivi un testo del link che indichi la destinazione, come Scarica il menu di primavera, non clicca qui. Aiuta chi scorre la pagina e aiuta i motori di ricerca a capire la pagina di destinazione.
Usa percorsi relativi (/contact) per le pagine del tuo sito, così i link continuano a funzionare su un indirizzo di anteprima o su un nuovo dominio.
Aggiungi un'indicazione nel testo dei link che aprono una nuova scheda, come (si apre in una nuova scheda), così nessuno si sorprende quando il pulsante Indietro non fa nulla.
Mantieni gli id dei link ad ancora brevi, in minuscolo e stabili. Altre persone li salveranno nei preferiti e li condivideranno.
Domande frequenti
Serve ancora rel="noopener" con target="_blank"?
I browser attuali applicano automaticamente il comportamento noopener ai link con target="_blank", quindi la pagina aperta non può raggiungere la tua tramite window.opener. Aggiungere rel="noopener" resta comunque innocuo e protegge i browser molto vecchi. Aggiungi anche noreferrer se non vuoi che l'altro sito veda quale pagina gli ha mandato il visitatore.
Devo usare un link o un pulsante?
Usa <a href> quando il clic porta a un nuovo indirizzo che si potrebbe salvare nei preferiti o aprire in una nuova scheda. Usa <button> quando il clic fa qualcosa nella pagina corrente, come aprire un menu, inviare un form o aggiungere al carrello. Puoi dare a ciascuno dei due l'aspetto dell'altro.
Perché il mio link ad ancora nasconde il titolo sotto l'header sticky?
Il browser fa scorrere la destinazione fino al bordo superiore della finestra, che è proprio dove si trova il tuo header fisso. Aggiungi scroll-margin-top alle destinazioni, impostato sull'altezza dell'header più un po' di margine, e il titolo finisce subito sotto.
Perché l'attributo download non funziona con il mio file?
I browser rispettano download solo per i file sulla stessa origine della pagina, o per gli indirizzi blob: e data:. Per un file su un altro dominio il link si limita ad aprirlo, a meno che quel server non invii un header Content-Disposition che dica al browser di salvarlo.
Come aggiungo un oggetto a un link mailto?
Aggiungilo come query string: mailto:[email protected]?subject=Booking%20request&body=Hi. Spazi e caratteri speciali vanno codificati in percent-encoding, quindi uno spazio diventa %20.
Anatomia di un link
Un <a> senza href è solo un segnaposto: non riceve il focus da tastiera e non fa nulla al clic. È l'href a renderlo un link. Il testo tra i tag è il nome accessibile, e in un link su immagine questo ruolo lo svolge il testo alt dell'immagine.
Altri attributi perfezionano il link. target sceglie dove si apre, rel descrive la relazione con la pagina di destinazione (nofollow, noopener, noreferrer, sponsored), download chiede al browser di salvare il file invece di mostrarlo, e hreflang o type descrivono la destinazione.
Pulsanti e link sono controlli diversi
Chi usa la tastiera preme Invio per seguire un link, e Invio o Spazio per premere un pulsante. Gli screen reader li annunciano in modo diverso, e solo i link hanno un menu contestuale con Apri in una nuova scheda. Quando un link viene usato per un'azione, o un div viene usato per l'uno o l'altro, alcuni di questi comportamenti spariscono.
Lo stile visivo è libero. Un link Registrati nell'header può sembrare un pulsante pieno, e un pulsante Rimuovi in un elenco può sembrare semplice testo sottolineato. Scegli l'elemento in base a ciò che succede, poi dagli lo stile che il design richiede.
Rendere i link accessibili
I link devono essere riconoscibili senza basarsi solo sul colore. Nel testo del corpo lo fa la sottolineatura; nelle barre di navigazione di solito è il layout a renderlo chiaro. Mantieni un indicatore di focus visibile e, se sostituisci quello predefinito del browser, assicurati che il nuovo abbia abbastanza contrasto.
Evita più link con lo stesso testo che portano in posti diversi, come una fila di link Leggi di più. Scrivi testi distinti oppure aggiungi uno span nascosto visivamente che completi la frase per chi usa uno screen reader.
Il link di base
Indirizzi assoluti, relativi e frammenti
I percorsi relativi vengono risolti rispetto alla pagina corrente; un percorso che inizia con / parte dalla radice del sito.
Link ad ancora, scroll fluido e header sticky
Dai un id alla destinazione e collegala con #id. scroll-behavior: smooth anima il salto, e scroll-margin-top evita che un header sticky copra il titolo.
Link ad ancora sotto un header sticky
Clicca su un link nella barra. Ogni sezione finisce subito sotto l'header grazie a scroll-margin-top. Elimina quella riga per vedere il problema che risolve.
Aprire un link in una nuova scheda
target="_blank" con un'indicazione visibile
noopener è implicito nei browser attuali ma tenerlo non costa nulla. noreferrer nasconde anche l'indirizzo della tua pagina all'altro sito.
Link che sembrano pulsanti, e pulsanti veri
Quale elemento
Il clic…
Elemento
Esempio
Porta a un altro indirizzo
<a href>
Registrati, Vedi i piani, Leggi la guida
Invia un form
<button type="submit">
Invia messaggio, Paga ora
Modifica qualcosa in questa pagina
<button type="button">
Apri menu, Aggiungi al carrello, Mostra altro
Un link con l'aspetto di pulsante accanto a un vero pulsante
Sembrano uguali. Solo il link si può aprire in una nuova scheda; solo il pulsante va dentro l'azione di un form.
Link su immagini
Un'immagine come link
Il testo alt indica la destinazione, perché è l'unico testo del link. Qui l'immagine è un piccolo SVG inline, così la demo funziona anche offline.
Link per email, telefono e download
mailto e tel
Scrivi i numeri di telefono nell'href in formato internazionale senza spazi. Il testo visibile puoi formattarlo come preferisci.
L'attributo download
Il valore, se presente, suggerisce un nome per il file. Vale solo per i file sulla tua stessa origine o per gli indirizzi blob: e data:.