Naviguer grâce aux liens

Les liens sont des éléments essentiels de la page web. Ils permettent de passer d'une page à l'autre ou d'aller à un endroit de la même ou d'une autre page, voire de rediriger vers un site externe ou un fichier à télécharger. Sans lien, pas de web.

Liens entre page

Les liens reposent sur l'utilisation de l'élément a combiné à l'attribut href qui détermine la cible du lien c'est-à-dire la page vers laquelle on souhaite faire aller le visiteur. Cela prend la forme suivante :

<a href="/initiation-html5/nom_de_page_ou_site">Texte du lien</a>

"Texte du lien" est le texte qui s'affiche par défaut en bleu et souligné sur lequel la personne pourra cliquer. Il est habituel de changer la couleur des liens grâce au CSS.

Il est aussi possible de faire des liens sur des images de la même façon. Dans ce cas, la balise d'image sera juste insérée en tant que contenu de la balise a :

<a href="/initiation-html5/nom_de_page_ou_site"><img src="mon_image.jpg" alt="Vers mon site" /></a>

Lien vers des ancres nommées

En HTML5 l'attribut name de l'élément a est déclaré obsolète. L'attribut id prend maintenant sa place pour servir de référence à l'élément à rejoindre. Pour référencer cet élément comme destination du lien il faudra le noter en valeur de l'attribut href précédé d'un #. Par exemple, pour un élément :

<p id="note1">Ceci est une note importante</p>

on pourra y accéder par le lien:

<a href="#note1">Voir note</a>

Si l'emplacement à rejoindre est dans une autre page html, il suffira de l'ajouter de la même façon à la suite de l'URL :

<a href="annexes.html#note1">Voir note</a>

Autres attributs intéressants

Le lien étant un élément très important d'une page web, il nous semble important de soigner leur contenu. Pour cela, le contenu de l'attribut href par le biais d'une URL bien choisie et d'un texte de lien partant de la même racine peuvent être secondés par d'autres attributs renseignant sur le rôle du lien et la façon dont il doit être traité.

hreflang

renseigne sur la langue de la page de destination. Cela peut être important dans le cas d'un site multilingue et éventuellement pour un traitement en feuille de style. Ils prennent la forme langue-pays comme dans fr-FR (français de france), fr-BE (français belge), en-GB (anglais de Grande-bretagne).

media

plus difficile que la précédente, permet de définir pour quel type de media la page liée est conçue tel que défini dans la section media Queries.

download

si cet attribut est présent, alors la destination du lien est considérée comme étant un élément à télécharger.

rel

De ce côté, l'attribut rel permet de définir quel est le rôle du ficher lié par rapport au fichier actuel. Il peut posséder une valeur textuelle, mais quelques valeurs par défaut sont proposées pour normaliser les référents : alternate, author, bookmark, help, icon, license, next, prev, nofollow, noreferrer, prefetch, stylesheet, tag, search.