À quoi sert l'attribut rel dans la balise link?

L'attribut rel dans la balise <link> définit la relation (relation) entre le document actuel et le document vers lequel la balise fait référence. Il indique au navigateur comment utiliser la ressource liée.

Les valeurs rel les plus couramment utilisées sont :

• stylesheet : Indique un fichier CSS externe à appliquer au document.
• icon/shortcut icon : Indique une icône (favicon) pour le site, affichée dans l'onglet du navigateur.
• preload : Charge préalablement la ressource qui sera nécessaire plus tard, sans bloquer le rendu.
• preconnect : Établit une connexion avec la source spécifiée à l'avance, accélérant les requêtes ultérieures.
• prefetch : Charge préalablement la ressource qui pourrait être nécessaire lors d'une future navigation.
• canonical : Indique l'URL canonique de la page, aidant les moteurs de recherche à déterminer la version principale du contenu.
• alternate : Indique une version alternative du document actuel (par exemple, dans une autre langue ou dans un autre format).
• author : Indique l'auteur du document.
• help : Indique un document d'aide.

Exemple d'utilisation de rel="stylesheet" :

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

Exemple d'utilisation de rel="icon" :

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

Exemple d'utilisation de rel="preload" :

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

L'utilisation de rel est nécessaire pour le traitement correct des ressources externes par le navigateur et les moteurs de recherche, ainsi que pour optimiser les performances.