Link

La H di HTML sta per hypertext, ipertesto: testo che rimanda ad altro testo. Un solo elemento, a, crea tutti i link del web.

L'elemento àncora

Un link si crea con l'elemento <a>, abbreviazione di anchor, «àncora». Il suo attributo href contiene l'indirizzo di destinazione, e il suo contenuto è il testo su cui si fa clic. In <a href="https://developer.mozilla.org/">MDN Web Docs</a>, le parole MDN Web Docs compaiono sottolineate, e attivarle carica quell'indirizzo. I link funzionano con il mouse, con un dito o con la tastiera: premi Tab per passare da un link all'altro e Invio per seguirne uno. Senza href, un <a> è solo un segnaposto e non si può raggiungere con Tab.

Indirizzi assoluti e relativi

Un URL assoluto contiene tutto: lo schema (https:), il dominio e il percorso, per esempio https://example.com/menu/bread.html. Usalo per i link ad altri siti. Un URL relativo omette le parti uguali a quelle della pagina corrente. In una pagina che si trova in https://example.com/menu/index.html, il link bread.html indica il file nella stessa cartella, ../about.html indica la cartella superiore, e /contact.html parte dalla radice del sito. I link relativi continuano a funzionare quando l'intero sito si sposta su un nuovo dominio.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Link dentro la stessa pagina

Dai a un elemento qualsiasi un id, e un link il cui href è un cancelletto seguito da quell'id salta direttamente a esso. <a href="#hours"> scorre fino a <h2 id="hours">. Un id deve essere unico nella pagina e non può contenere spazi. Gli articoli lunghi lo usano per l'indice, e molti siti mettono in cima un link per saltare (Vai al contenuto principale), così chi usa la tastiera non deve attraversare con Tab tutto il menu a ogni pagina.

Email, telefono e download

Altri schemi aprono altri programmi. mailto:hello@example.com apre una nuova email nel programma di posta del visitatore, e tel:+82212345678 propone di chiamare il numero da un telefono. Aggiungere l'attributo download a un link chiede al browser di salvare il file invece di aprirlo. Questi link sono comodi, ma di' che cosa fanno nel testo del link, perché nessuno si aspetta che si apra all'improvviso un programma di posta.

Nuove schede e buon testo dei link

target="_blank" apre il link in una nuova scheda. Usalo con parsimonia: toglie il controllo al visitatore, e il pulsante Indietro non lo riporta più alla pagina di prima. Quando lo usi, segnalalo nel testo del link, per esempio (si apre in una nuova scheda). La cosa più importante è il testo del link stesso. Chi usa uno screen reader spesso richiama l'elenco di tutti i link di una pagina, e un elenco di dieci voci che dicono tutte clicca qui o leggi di più non gli dice nulla. Scrivi un testo che abbia senso anche fuori contesto: Scarica l'orario 2026, non clicca qui.

Per impostazione predefinita i browser sottolineano i link e li colorano di blu, e mostrano in viola quelli già visitati. Puoi ridefinire lo stile dei link con il CSS, ma tieni qualcosa oltre al solo colore, come la sottolineatura, così chi non distingue i colori vede comunque quali parole sono link. Quando un link ha il focus della tastiera, i browser gli disegnano attorno un anello di focus; non toglierlo mai senza metterci al suo posto un sostituto ben visibile.