FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 1.8. Les ancres en HTML

Les ancres

Les ancres permettent de faire un lien vers un endroit précis dans la page. Par exemple, sur ce site chaque titre est précédé d'un symbole dièse qui fait référence à une ancre. Pour créer un lien vers un endroit précis de la page, ce dernier doit impérativement contenir une balise identifié. En pratique, on associe un identifiant à la balise cible :

<h3 id="exempleAncre">Mon titre</h3>

Si la cible du lien ne contient pas de balise (par exemple au milieu d'un texte), il convient de d'ajouter une balise sans contenu qui ne sera pas visible dans la page :

<span id="exempleAncre"></span>

Le lien

Si le lien se trouve sur la même page que l'ancre, le lien contiendra le nom de l'ancre précédé du symbole #. Voici un exemple :

<a href="#exempleAncre">Lien vers une ancre interne</a>

Si l'ancre se trouve sur une autre page, on ajoutera le nom de l'ancre prédédée de # à la fin de l'URL :

<a href="http://www.example.com/#exempleAncre">Lien vers une ancre externe</a>

Exemple

Voici un exemple de page avec un sommaire où chaque élément pointe vers une section de la page :

<h1>Exemple d'ancres en HTML</H1>

<a href="#title1">Section 1</a><br>
<a href="#title2">Section 2</a><br>
<a href="#title3">Section 3</a><br>
<a href="https://www.lucidar.me/fr/web-dev-class/lesson-1-08-html-anchors/#exemple">Ancre externe</a><br>

<h2 id="title1">Section 1</h2>
<div style="height:150px">Bla bla</div>

<h2 id="title2">Section 2</h2>
<div style="height:150px">Bla bla</div>

<h2 id="title3">Section 3</h2>
<div style="height:500px">Bla bla</div>

Le code précédent affiche des liens vers différentes ancres :

Voir aussi


Dernière mise à jour : 06/11/2019