Les ancres et liens d'évitement HTML

Une ancre un lien vers un endroit précis de la page courante, ou d'une autre page afin de positionner correctement le navigateur. Un lien d'évitement ou "liens de navigation interne" est un lien qui facilite la navigation sur une page. Ces liens sont connus notamment pour permettre l'accès direct à différentes portions du document, pour les navigateurs vocaux, afin d'éviter (c'est le cas de le dire) de "lire" linéairement tout un contenu qui ne serait pas pertinent, selon ce que l'on cherche, en début de document.

Les ancres HTML

Créer une ancre est relativement simple : il suffit d'attribuer à l'élément vers lequel on veut pouvoir pointer un l'attribut id et d'y associer un lien débutant par le caractère dièse #, suivi du nom de cet identifiant.

Exemple :

<div id="zone_a_pointer">blablabla</div>

Le lien qui pointera vers la zone ci-dessus ressemblera a ceci

<a href="#zone_a_pointer">Voir la zone a pointer</a>

Cas pratique : un lien vers le haut de page

Un lien de retour en haut de page est souvent utile lorsque la page est longue. Pour créer l'ancre, on place ce code juste après l'élément body.

<a id="top_page"></a>

Ensuite nous faisons un lien vers cette ancre en précisant dans l'attribut href le nom de l'ancre précédé de #

<a href="#top_page">haut de page</a>

Astuce : Avec la plupart des navigateurs (sauf Opera 9), aucune ancre n'est nécessaire (voir l'exemple ci-dessous) pour retourner en haut de page : le # seul suffit à revenir en haut de la page.

<a href="#">haut de page</a>

Les liens d'évitement

Les liens d'évitement sont indispensables sur un site, notamment pour les utilisateurs de la navigation clavier. Voici quelques exemples de liens d'évitement : "Aller au menu", "Aller au contenu", "Retour en haut de page", … Ces liens sont tout simplement des ancres qui pointent vers des endroits spécifiques de votre page ou votre site.

A vous de les placer avec parcimonie et ergonomie pour en tirer un maximum d'efficacité et de fluidité dans la navigation de votre site.

Notes de version

  • [18/11/2017] : Article initial

Auteurs et sources