par / LinkedIn 3 mn

HTML : Jeter l’ancre pour faire des liens dans la même page web

Créer des ancres pour faire des liens web dans la même page
Web anchor : <img src="web-anchor.png" id="haut"> Comment faire un lien, non pas d’une page à une autre, mais vers un point précis d’une même page web ? En cliquant sur le lien, je veux afficher la page directement “scrollée” sur la partie de contenu qui m’intéresse… Tuto HTML : voyons comment créer des “Ancres” dans une page web et faire des liens vers elles.

Donc un petit cours de HTML à destination du WebMaster : les ancres nommées, ou comment faire un lien à l’intérieur d’une même page.

Et commençons par un exemple, vous pouvez cliquer sur ces liens pour aller :
directement au titre 1 D’abord jetons l’ancre
directement au titre 2 Créons des liens vers les ancres

Web anchor : <h2 id="titre1">D'abord jetons l'ancre</h2> D’abord “jetons l’ancre” !

A tous les endroits où on veut scroller la fenêtre on pose des ancres. Ce sont les points de repères.
Ces repères dans le code HTML sont invisibles à l’écran. Pour créer ces repères, il suffit de rajouter l’attribut id à une balise qui va alors servir de repère. Ce peut être n’importe quelle balise du code HTML de la page, un titre par exemple, ou une image.

Voyons 2 exemples où un titre et une image pourront être utilisés comme ancre :

// Sur une image
<img src="chemin-vers-image.jpg" id="il-faut-aller-ici">
// Sur un titre
<h2 id="il-faut-aller-ici">Ici mon titre</h2>

Dans ce code HTML, que vous pouvez copier, on remplace “il-faut-aller-ici” par des noms distincts d’ancres. Des noms comme “haut”, ou “titre1”, ou encore “titre2
Ces noms ne doivent pas contenir d’espaces, ni de caractères spéciaux… On peut choisir de A à Z de 1 à 0, des “ – “ ou des “ _“… C’est à peu près tout !
Surtout pas de “é”, ni de “à” de “ç” ou de “/”, “§”, “#”, “@”, pas de “point”, etc.
Il faudra également faire attention à ce que les attributs id des éléments soient uniques, ils ne peut y avoir 2 id qui portent le même nom

Cliquez ici pour aller en haut de la page

Web anchor : <h2 id="titre2">Créons des liens vers des ancres</h2> Créons des liens vers des ancres

Le lien classique est constitué du nom de l’ancre, simplement précédé du symblole #
Par exemple : #il-faut-aller-ici
Et pour une ancre dans une page (truc.html par exemple), à partir d’une autre, cela donne :
truc.html#il-faut-aller-ici
Un lien super complet pourrait-être : http://www.mon-site.com/truc.html#il-faut-aller-ici
Ce dernier lien appelle la page web truc.html sur le site web http://www.mon-site.com et scrolle la page au niveau de l’ancre #il-faut-aller-ici

On insère le lien classiquement dans une page.
3 exemples en HTML :

<a href="#il-faut-aller-ici"> Cliquez ici </a>
<a href="truc.html#il-faut-aller-ici"> Cliquez ici </a>
<a href="http://www.mon-site.com/truc.html#il-faut-aller-ici"> Cliquez ici </a>

Les mêmes exemples en Textile :
"Cliquez ici()":#il-faut-aller-ici
"Cliquez ici()":truc.html#il-faut-aller-ici
"Cliquez ici()":http://www.mon-site.com/truc.html#il-faut-aller-ici

Voilà pour la mise en place de liens internes sur une page web en HTML !
1/ On place des ancres invisibles dans le code, aux endroits adhoc :

<h1 id="il-faut-aller-ici">Le titre de mon article</h1>

2/ On crée les liens vers ces ancres en ajoutant # devant leur nom :
<a href="#il-faut-aller-ici"> Cliquez ici </a>

Cliquez ici pour aller en haut de la page

A lire aussi :
A propos du pseudo langage de marquage Textile