Balise link
La balise link connecte des fichiers CSS à une page
HTML. De plus, link connecte
certains autres fichiers, par exemple, un favicon.
(Un favicon est la petite icône du site, qui est
visible dans l'onglet du navigateur. On peut aussi la
voir dans certains moteurs de recherche en face des sites, par exemple dans Yandex).
Cette balise a de nombreux attributs et ils peuvent prendre des valeurs diverses, cependant dans la vraie vie, ils sont pratiquement tous inutilisés. L'utilisation la plus courante est la connexion du CSS et l'ajout du favicon.
Comment connecter un CSS :
<link rel="stylesheet" href="style.css">
Comment connecter un favicon :
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
La balise link ne nécessite pas de balise fermante.
Attributs
| Attribut | Description |
|---|---|
href |
Chemin d'accès au fichier à connecter. |
media |
Type d'appareil pour lequel le fichier doit être connecté. L'idée est que vous pouvez connecter un fichier CSS uniquement pour les grands écrans (valeur screen)
ou uniquement pour les petits écrans : pour les mobiles ou les tablettes (valeur handheld).
Valeurs possibles : all, braille, handheld, print, screen, speech, projection, tty, tv.
Voir plus de détails ci-dessous.
|
rel |
Type du fichier à connecter.
Valeurs possibles : stylesheet | alternate.
La valeur stylesheet indique qu'un fichier CSS est connecté,
la valeur alternate est utilisée, par exemple, pour indiquer un lien
vers un fichier au format XML décrivant un flux d'actualités, d'annonces d'articles.
|
charset |
Encodage du fichier à connecter.
Actuellement, la norme est utf-8.
|
type |
Type de données du fichier à connecter. |
Valeurs de l'attribut media
En HTML5, des requêtes média peuvent être spécifiées comme valeurs.
| Valeur | Description |
|---|---|
all |
Tous les appareils. |
screen |
Écran d'ordinateur. |
handheld |
Téléphones, smartphones, appareils avec un petit écran. |
braille |
Appareils basés sur le système Braille, destinés aux personnes aveugles. |
speech |
Synthétiseurs vocaux, ainsi que les programmes de lecture de texte à voix haute. Les navigateurs vocaux sont également inclus. |
print |
Imprimantes. |
projection |
Projecteurs. |
tty |
Télétypes, terminaux, appareils portables avec des capacités d'affichage limitées. Les pixels ne doivent pas être utilisés comme unité de mesure pour eux. |
tv |
Téléviseurs capables d'ouvrir des pages web (cela existe aussi). |
Valeur par défaut : all.
Exemple
Regardons à quoi ressemble la structure d'une page HTML simple, à laquelle nous ajouterons la connexion de fichiers CSS et d'un favicon :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
