Sur cette page :

  1. La balise <link />
    1. À quoi ça sert ?
    2. Fonctionnement de l’élément <link />
    3. Références avant et arrière
    4. Lier une feuille de styles

10.1# À quoi ça sert ?

L’élément <link /> permet d’associer des documents à une page web. Il est ainsi possible, par exemple, de dessiner les relations entre les pages d’un site, en leur donnant un sens sémantique.

La spécification du W3C propose un exemple concret d’utilisation intéressant : un navigateur pourrait les utiliser pour proposer à l’utilisateur un menu dans une barre d’outils vers la page d’accueil, la table des matières de la section dans laquelle la page s’inscrit, ou le plan du site.

À l’instar d’une ancre <a>, vous pouvez lier tout type de document à la page web : une autre page, un document PDF, une image… en bref, ce que vous voulez.

Cette balise n’est pas toujours très bien gérée par les navigateurs, sauf pour lier une feuille de style CSS à la page. Mais on lui a découvert un nouvel intérêt depuis que les robots d’indexation des moteurs de recherche les utilisent.

L’élément <link /> est invisible, il doit obligatoirement être placé dans l’en-tête <head> de la page : il n’a donc pas de contenu.

Cette balise doit contenir certains attributs nécessaires à son bon fonctionnement :

  • href : indique l’emplacement du document auquel la balise s’applique,
  • type : indique le type du document lié (type mime),
  • rel et/ou rev : indique le sens sémantique du lien entre les documents, nous en parlerons plus en détail ci-dessous.

D’autres sont utiles dans certains cas :

  • media : indique le type de média avec lequel sera lu le document lié (un écran, un téléviseur, un document imprimé…), nous en reparlerons lorsque nous étudierons l’association d’une feuille de style à la page,
  • hreflang : indique la langue du document lié,
  • title : permet de donner un titre au lien vers le document lié, cet attribut peut être utilisé par les navigateurs pour proposer des feuilles de styles alternatives attachées à une page.

Pour en savoir plus, référez vous à la recommandation du W3C au sujet de cette balise.

10.3# Références avant et arrière

Les attributs rel et rev servent à définir le sens des liens définis avec l’élément <link />.

L’attribut rev correpond à une référence vers l’avant, c’est à dire le lien que possède ce document avec celui lié, rev, au contraire, définit une référence arrière. Par exemple, la page http://www.martiusweb.net/category/Tutoriaux/XHTML-CSS est la table des matières (contents) de ce chapitre (chapter) :

  1. <link href="http://www.martiusweb.net/category/Tutoriaux/XHTML-CSS" rel="start" rev="chapter" />

La norme W3C définit plusieurs valeurs pour ces attributs :

  • alternate désigne un document alternatif à celui-ci, en l’utilisant avec l’attribut lang, cela signifie que le document lié est une traduction de celui-ci. Avec l’attribut media, le document lié est une version prévue pour un autre type de média. Vous pouvez également combiner cet attribut avec un autre en les séparant par un espace.
  • stylesheet : désigne une feuille de styles externe, vous pouvez utiliser la valeur alternate stylesheet pour proposer une feuille de styles alternative à l’utilisateur.
  • start : désigne le premier document d’une série, par exemple, une page d’introduction. Cet élément est utilisé par les moteurs de recherche.
  • next : désigne la page suivante.
  • prev : désigne la page précédente.
  • contents : désigne la table des matières référençant le document courant.
  • index : désigne un index référençant le document courant.
  • glossary : désigne un glossaire référençant l’élément courant.
  • copyright : désigne un document présentant le copyright du document.
  • chapter : désigne un document servant de chapitre.
  • section : désigne un document correspondant à une section d’une collection de documents.
  • subsection : désigne un document correspondant à une sous-section d’une collection de documents.
  • appendix : désigne un document correspondant à une appendice du document courant.
  • help : désigne un document fournissant de l’aide ou des informations complémentaires au document courant.
  • bookmark : représente un marque-page, c’est à dire un lien vers un autre élément, un peu comparable à une ancre. Utilisez l’attribut title pour référencer ce marque-page.

Vous pouvez utiliser vos propres attributs en les définissant dans un fichier séparé, dont l’adresse sera fournie par l’attribut profile de la balise <head>.

Pour en savoir plus, référez vous à la recommandation du W3C au sujet des liens sémantiques entre documents.

10.4# Lier une feuille de styles

L’élément <link /> est très souvent utilisé pour lier une feuille de styles à la page. Le code minimum pour cette opération est celui-ci :

  1. <link type="text/css" href="./styles.css" rel="stylesheet" rev="stylesheet" />

Notez qu’il est obligatoire de préciser l’attribut type="text/css".

Vous pouvez, cependant, souhaiter associer une feuille différente selon que la page est affichée sur un écran ou imprimée par exemple. Dans ce cas, je vous conseille de prévoir une feuille de styles globale, qui contiendra la mise en forme principale, et une feuille secondaire pour les médias désirés. Vous pouvez associer une feuille à plusieurs médias en les séparant par des virgules.

  1. <link type="text/css" href="./styles-all.css" rel="stylesheet" rev="stylesheet" media="all" />
  2. <link type="text/css" href="./styles-screen.css" rel="stylesheet" rev="stylesheet" media="screen, tv" />
  3. <link type="text/css" href="./styles-print.css" rel="stylesheet" rev="stylesheet" media="print" />

Il est également possible de proposer des feuilles de styles qui seront utilisées par des lecteurs vocaux ou navigateurs en braille.

Note : à l’heure actuelle, nous rédigeons un cours sur l’accessibilité des sites internet, c’est pourquoi nous n’en parlons pas ici en détail.