Tag HTML <link>

Il tag <link> definisce la relazione tra il documento corrente e una risorsa esterna. Il suo utilizzo più comune è il collegamento di un foglio di stile CSS esterno, ma è anche il modo per allegare una favicon, dichiarare versioni tradotte di una pagina e suggerire al browser quali risorse recuperare in anticipo per migliorare le prestazioni.

Questa pagina illustra la sintassi di <link>, tutti gli attributi che accetta e esempi pratici per i valori rel più utilizzati: stylesheet, icon, preload e alternate. Spiega inoltre la famiglia di resource hint (preload, prefetch, preconnect, dns-prefetch) e gli attributi di sicurezza crossorigin / integrity.

Si noti che <link> non carica script — questo è il compito del tag <script>. L'unica eccezione è rel="modulepreload", che precarica soltanto un modulo JavaScript in modo che sia pronto quando un <script> lo richiede in seguito.

Un documento HTML può contenere più elementi <link> per diversi tipi di risorse, come fogli di stile, icone e contenuto precaricato. Tutti devono trovarsi nella sezione <head> del documento, tipicamente prima del tag di chiusura </head>.

Sintassi

Il tag <link> è vuoto, il che significa che il tag di chiusura non è necessario. Contiene solo attributi. In XHTML, tuttavia, il tag <link> deve essere chiuso (<link/>).

Esempio del tag HTML `<link>`:

Tag HTML <link>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
    <p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
  </body>
</html>

Provalo tu stesso »

In questo esempio la pagina non ha stili propri. Ogni regola che controlla l'aspetto dell'intestazione e del paragrafo si trova nel file esterno style.css, che l'elemento <link> importa. Apri l'editor live qui sopra e modifica style.css per vedere le modifiche applicate al markup.

Collegare una favicon

Una favicon è la piccola icona visualizzata nella scheda del browser e nei segnalibri. Si dichiara con rel="icon". L'attributo type indica al browser il formato dell'immagine, mentre sizes consente di offrire più risoluzioni in modo che il browser possa scegliere quella più adatta.

<head>
  <!-- A standard favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any" />

  <!-- A modern SVG icon (scales to any resolution) -->
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />

  <!-- A PNG at a specific size -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png" />

  <!-- Icon used when the page is added to an iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

sizes="any" contrassegna un'icona scalabile (come .ico o .svg); altrimenti si usa LARGHEZZAxALTEZZA (ad esempio 32x32) per ciascun file.

Precaricamento delle risorse con `rel="preload"`

rel="preload" indica al browser di recuperare una risorsa in anticipo, con alta priorità, prima che il parser la scopra normalmente. Non applica la risorsa — la scarica soltanto affinché il file sia già nella cache quando viene richiesto.

Quando si usa preload, l'attributo as è obbligatorio. Indica al browser il tipo di risorsa in modo che possa impostare la priorità corretta, applicare l'intestazione Accept appropriata e attivare i controlli CORS e Content-Security-Policy appropriati.

<head>
  <!-- Preload a stylesheet -->
  <link rel="preload" href="/main.css" as="style" />

  <!-- Preload a font (fonts are always fetched with CORS, so crossorigin is required) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

  <!-- Preload an image that is the page's largest element -->
  <link rel="preload" href="/hero.jpg" as="image" />
</head>

Un foglio di stile precaricato ha ancora bisogno di un normale link rel="stylesheet" (o di un <style>/@import) per essere effettivamente applicato alla pagina — preload da solo lo scarica soltanto.

Resource hint: preload vs prefetch vs preconnect vs dns-prefetch

Questi quattro valori rel migliorano tutti le prestazioni, ma risolvono problemi diversi e non sono intercambiabili:

Valore `rel`	Cosa fa	Usarlo per
`preload`	Scarica una risorsa necessaria alla pagina corrente a breve, con alta priorità.	CSS critico, font, l'immagine LCP — file che altrimenti verrebbero scoperti tardi.
`prefetch`	Scarica una risorsa che probabilmente servirà a una navigazione futura, con bassa priorità.	Asset per la pagina successiva che l'utente visiterà probabilmente.
`preconnect`	Apre la connessione (DNS + TCP + handshake TLS) a un'origine diversa in anticipo.	Origini da cui si richiederà sicuramente a breve, come un host di font o API.
`dns-prefetch`	Risolve solo il DNS per un'origine. Meno costoso di `preconnect` e buon fallback.	Origini che si potrebbero usare, o come complemento a `preconnect` per browser meno recenti.

<head>
  <!-- Open the connection to the font host as early as possible -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- Fallback DNS lookup for browsers that ignore preconnect -->
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

  <!-- Warm up an asset the next page will need -->
  <link rel="prefetch" href="/next-page.js" as="script" />
</head>

Regola pratica: preload per questa pagina, prefetch per la prossima, e preconnect / dns-prefetch per preparare le connessioni ad altre origini.

Versioni alternate con `rel="alternate"`

rel="alternate" punta a una rappresentazione alternativa del documento corrente. Combinato con hreflang, indica ai motori di ricerca quale URL serve quale lingua o regione — indispensabile per i siti multilingue.

<head>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="de" href="https://example.com/de/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <!-- Default fallback when no language matches -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

Lo stesso valore rel dichiara anche alternative non HTML, come un feed RSS:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />

`crossorigin` e `integrity`

L'attributo crossorigin controlla se la richiesta cross-origin viene effettuata con CORS e se le credenziali (cookie) vengono inviate:

crossorigin="anonymous" (o semplicemente crossorigin) — effettua una richiesta CORS senza credenziali.
crossorigin="use-credentials" — effettua una richiesta CORS che include le credenziali.

crossorigin è necessario ogni volta che il browser deve leggere la risposta tra origini diverse, più comunemente per i font (che vengono sempre recuperati in modalità CORS) e per qualsiasi risorsa protetta con integrity.

L'attributo integrity abilita la Subresource Integrity (SRI). Si fornisce un hash crittografico del file; il browser recupera la risorsa, la calcola e si rifiuta di applicarla se gli hash non corrispondono. Questo ti protegge nel caso in cui un CDN sia compromesso o un file venga alterato.

<link
  rel="stylesheet"
  href="https://cdn.example.com/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

Il formato dell'hash è <algoritmo>-<hash-base64> (algoritmi consentiti: sha256, sha384, sha512). Poiché il controllo di integrità deve leggere la risposta, un link integrity verso un'altra origine deve impostare anche crossorigin.

Attributi

Attributo	Valore	Descrizione
as	content_type	Specifica il tipo di contenuto caricato. Obbligatorio quando si usa `rel="preload"`.
charset	char_encoding	Definisce la codifica del documento collegato. Obsoleto in HTML5.
crossorigin	anonymous use-credentials	Configura le impostazioni CORS per la risorsa collegata.
href	URL	Definisce l'URL del file esterno.
hreflang	language_code	Definisce la lingua del testo del documento collegato.
integrity	hash_value	Abilita la subresource integrity per verificare le risorse recuperate.
media	media_query	Definisce il dispositivo per cui verranno applicati gli stili.
rel	alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload	Definisce la relazione tra il documento corrente e il file collegato. Valori comuni: `stylesheet` (collega un file CSS), `icon` (collega una favicon), `preload` (precarica una risorsa), `alternate` (collega a una versione alternativa del documento).
rev	reversed relationship	Definisce la relazione tra il documento corrente e quello collegato. Obsoleto in HTML5.
sizes	Width x Height	Imposta la dimensione delle icone associate. Usato solo con `rel="icon"`.
type	media_type	Definisce il tipo MIME (specifica per il trasferimento in rete di vari tipi di file) del documento collegato. Nota: quando si collega un foglio di stile, `type="text/css"` è facoltativo e il valore predefinito è CSS.

Il tag <link> supporta anche gli Attributi Globali e gli Attributi di Evento.

Risorse correlate

Tag HTML <head> — dove appartiene ogni elemento <link>.
Tag HTML <script> — il modo corretto per caricare JavaScript.
Tag HTML <style> — incorpora CSS direttamente invece di collegare un file.
Introduzione a CSS — come funzionano effettivamente i fogli di stile collegati.

Esercitazione

Pratica

Quale attributo è obbligatorio quando si usa il tag link HTML con rel='preload'?

assrctargetdownload

Pratica

Seleziona tutti gli attributi validi del tag link HTML (più di uno è corretto).