A cosa serve l'attributo rel nel tag link?

L'attributo rel nel tag <link> definisce la relazione (relationship) tra il documento corrente e il documento a cui fa riferimento il tag. Comunica al browser come utilizzare la risorsa collegata.

I valori di rel più comunemente usati sono:

• stylesheet: Indica un file CSS esterno da applicare al documento.
• icon/shortcut icon: Indica un'icona (favicon) per il sito, visualizzata nella scheda del browser.
• preload: Carica in anticipo la risorsa che sarà necessaria più tardi, senza bloccare il rendering.
• preconnect: Stabilisce una connessione con la fonte specificata in anticipo, accelerando le richieste successive.
• prefetch: Carica in anticipo la risorsa che potrebbe essere necessaria in una futura navigazione dell'utente.
• canonical: Indica l'URL canonico della pagina, aiutando i motori di ricerca a determinare la versione principale del contenuto.
• alternate: Indica una versione alternativa del documento corrente (ad esempio, in un'altra lingua o in un altro formato).
• author: Indica l'autore del documento.
• help: Indica un documento di aiuto.

Esempio di utilizzo di rel="stylesheet":

<link rel="stylesheet" href="/css/style.css">

Esempio di utilizzo di rel="icon":

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Esempio di utilizzo di rel="preload":

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>