<link>

<link>

<link> importe un fichier externe pour être interprété par le navigateur, le plus souvent une feuille de style CSS ou une icône
<link> est une balise orpheline (qui ne se ferme pas)
Les attributs href et rel sont obligatoire
<link> utilise les attributs globaux

href

Indique l'url d'une ressource
  • Obligatoire avec la balise <link>
  • S’utilise toujours avec l’attribut rel
<link rel="valeur" href="url">
Valeur Description Infos
url
  • L'url, le lien pointant vers une ressource, un fichier, un document
  • En valeur absolu vers une ressource externe
  • Ou en valeur relative pour un élément interne
  • MDN Web Docs
  • HTML Living Standard
<link rel="valeur" href="url">

rel

Spécifie la nature de la ressource correspondante au lien indiqué dans l'attribut href
  • Obligatoire avec la balise <link>
  • S’utilise toujours avec l’attribut href
<link rel="valeur" href="url">
Valeur Description Infos
stylesheet
  • Indique que le lien est une feuille de style
  • Recommandé
  • MDN Web Docs
  • HTML Living Standard
<link rel="stylesheet" href="url">
icon
  • Indique que l'url pointe vers une icône (format .ico) ou une image pour en faire une favicon
  • Recommandé
  • MDN Web Docs
  • HTML Living Standard
<link rel="icon" href="url">
alternate Indique que l'url pointe vers une version alternative de la page
  • MDN Web Docs
  • HTML Living Standard
<link rel="alternate" href="url">
author Indique que l'url pointe vers le site web de l'auteur du site ou de la page web actuelle
  • MDN Web Docs
  • HTML Living Standard
<link rel="author" href="url">
help Indique que l'url pointe vers un document d'aide
  • MDN Web Docs
  • HTML Living Standard
<link rel="help" href="url">
license Indique que l'url pointe vers un document fournissant les termes du copyright
  • MDN Web Docs
  • HTML Living Standard
<link rel="license" href="url">
search Indique que l'url pointe vers un document utilisé pour rechercher dans le document actuel et ses pages associées
  • MDN Web Docs
  • HTML Living Standard
<link rel="search" href="url">
canonical Indique que l'url pointe vers un document canonique
  • MDN Web Docs
  • HTML Living Standard
<link rel="canonical" href="url">
prefetch Optimisation du chargement de la page : Spécifie que le navigateur peut télécharger et mettre en cache de manière préventive le fichier mentionné par l' url (priorité faible)
  • MDN Web Docs
  • HTML Living Standard
<link rel="prefetch" href="url">
dns-prefetch Optimisation du chargement de la page : Effectue une résolution des noms de domaine pour l'origine de la ressource spécifiée par l' url de manière préventive
  • MDN Web Docs
  • HTML Living Standard
<link rel="dns-prefetch" href="url">
preload Optimisation du chargement de la page : Indique que le navigateur doit télécharger et mettre en cache le fichier mentionné par l' url au plus tôt (priorité haute), le type de la ressource est renseigné par l'attribut as
  • MDN Web Docs
  • HTML Living Standard
<link rel="preload" href="url">
next Indique que la page actuelle fait partie d'une série, et que la page suivante est renseigné par l' url
  • MDN Web Docs
  • HTML Living Standard
<link rel="next" href="url">
prev Indique que la page actuelle fait partie d'une série, et que la page précédente est renseigné par l' url
  • MDN Web Docs
  • HTML Living Standard
<link rel="prev" href="url">

type

L'attribut type indique le type du fichier, du document lié par l'attribut href++Conseillé avec l'attribut rel="stylesheet" et rel="icon"
<link rel="valeur" type="valeur" href="url">
Valeur Description Infos
type de document
  • La liste des types est disponible sur IANA Media Types list
  • Les valeurs les plus fréquentes sont :
  • text/css pour une feuille de style
  • image/x-icon pour une icône au format .ico
  • image/png pour une icône au format .png
  • MDN Web Docs
  • HTML Living Standard
<link rel="valeur" type="valeur" href="url">

media

  • Indique pour quel périphérique, le code CSS est destiné.
  • Possibilité d'indiquer plusieurs média
  • Les opérateurs and (et), not (sauf) et , (ou) permettent de les joindre ou d'affiner la zone de sortie
Valeurs des périphériques de sortie
Valeur Description Infos
all
  • Valeur par defaut
  • Correspond à tous les appareils, tout les écrans
  • MDN Web Docs
  • W3C
  • <link rel="valeur" href="&#91;url&#93;" media="all">
screen Correspond aux écrans d'ordinateur
  • MDN Web Docs
  • W3C
  • <link rel="&#91;valeur&#93;" href="&#91;url&#93;" media="screen">
print Correspond au rendu à l'impression et à la prévisualisation avant impression
  • MDN Web Docs
  • W3C
  • <link rel="&#91;valeur&#93;" href="&#91;url&#93;" media="print">
<link rel="valeur" href="url" media="valeur">
Valeur Description Infos
aspect-ratio
  • Spécifie le rapport largeur / hauteur de la zone d'affichage
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (aspect-ratio: valeur)">
width
  • Correspond à la largeur de la zone d'affichage
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (width: valeur)">
height
  • Correspond à la hauteur de la zone d'affichage
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (height: valeur)">
color
  • Correspond au nombre de bits par couleur de l'affichage
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (color: valeur)">
color-index
  • Indique le nombre de couleur que l'affichage peut gérer
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (color-index: valeur)">
monochrome
  • Indique le nombre de bits par pixel utilisés pour l'affichage monochrome de l'appareil
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (monochrome: valeur)">
grid
  • Indique si le périphérique fonctionne grâce à une grille ou une matrice bitmap
  • 1 : grille
  • 0 : matrice bitmap
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (grid: valeur)">
orientation
  • Spécifie le mode d'orientation de l'affichage de l'appareil
  • landscape : mode paysage
  • portrait : mode portrait
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (orientation: valeur)">
resolution
  • Indique la résolution de l'affichage (densité de pixels) de l'appareil
  • valeurs en dpi ou dpcm
  • Les préfixes "min-" et "max-" peuvent être utilisés
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (resolution: valeur)">
scan
  • Détermine le processus utilisé pour composer l'image sur l'appareil
  • interlace : image composée de lignes entrelacées
  • progressive : image composée par un balayage progressif
  • MDN Web Docs
<link rel="valeur" href="url" media="zone d'affichage opérateur (scan: valeur)">

hreflang

Cet attribut sert à définir la langue du fichier indiqué dans l'attribut href
<link rel="valeur" href="url" hreflang="valeur">
Valeur Description Infos
Code de la langue
  • Le code est généralement constitué de 2 lettres selon la norme ISO 639-1
  • La liste des codes est visible sur le site de Wikipedia
  • MDN Web Docs
  • HTML Living Standard
<link rel="valeur" href="url" hreflang="valeur">

crossorigin

Une demande cross-origin est une requête pour une ressource (feuilles de style, images, polices ou scripts...) située sur un autre serveur, un autre domaine. Cette demande est gérée par CORS (Cross-Origin Resource Sharing) qui détermine si le navigateur est autorisé ou non à charger le contenu externe
N'utilisez pas cet attribut si tous vos fichiers se situent sur votre serveur, votre domaine.
<link rel="valeur" href="url" crossorigin="valeur">
Valeur Description Infos
anonymous
  • La demande cross-origin est envoyée sans identification et effectue une authentification HTTP de base
  • Valeur par defaut
  • MDN Web Docs
  • HTML Living Standard
<link rel="valeur" href="url" crossorigin="anonymous">
use-credentials Demande d'origine croisée sera envoyée avec les informations d'identification, les cookies et le certificat
  • MDN Web Docs
  • HTML Living Standard
<link rel="valeur" href="url" crossorigin="use-credentials">

sizes

Cet attribut indique la taille de l'icône définit dans l'attribut href
Ne s'utilise qu'avec l'attribut rel="icon"
<link rel="icon" href="url" sizes="valeur">
Valeur Description Infos
hauteur x largeur
  • La taille est en pixel
  • Ne pas saisir d'unité de mesure (px)
  • Possibilité de saisir plusieurs tailles
  • MDN Web Docs
  • HTML Living Standard
<link rel="icon" href="url" sizes="valeur">
any S'utilise pour les images vectoriel (svg)
  • MDN Web Docs
  • HTML Living Standard
<link rel="icon" href="url" type="image/svg+xml" sizes="any">
  • MDN Web Docs
  • HTML Living Standard
  • Can i use