====== 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 : //
<code html>
<div id="zone_a_pointer">blablabla</div>
</code>

Le lien qui pointera vers la zone ci-dessus ressemblera a ceci
<code html>
<a href="#zone_a_pointer">Voir la zone a pointer</a>
</code>


===== 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//.
<code html>
<a id="top_page"></a>
</code>

Ensuite nous faisons un lien vers cette ancre en précisant dans l'attribut href le nom de l'ancre précédé de #
<code html>
<a href="#top_page">haut de page</a>
</code>

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.
<code html>
<a href="#">haut de page</a>
</code>


===== 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 =====

  * Auteur : [[:user:montuy337513]]

===== Navigation =====

  * [[:accueil|Accueil]]
  * [[:gestion-site-internet]]
  * [[:tutoriel-javascript]]
  * [[:tutoriel-html]]
  * [[:tutoriel-php-mysql]]
  * [[:tutoriel-referencement-seo]]

<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">