Comment créer des liens vers des ancres dans une page web ?


Vous avez peut-être un jour eu envie de faire un lien vers un point précis de votre article ? Où d’inviter vos lecteurs à aller sur une page, à un paragraphe donné ? Faire ce genre de liens est très simple.

1. La structure de la balise <a>

Comme vous le savez probablement, pour faire un lien, on utilise la balise <a> avec la syntaxe suivante :

1
<a href="https://le-chemin-vers-ma-page.html" title="texte affiché au survol" rel="dofollow" > Le texte de mon lien </a>

Avec les attributs :

  • *title=”texte” Texte affiché au survol du lien
  • *rel=”dofollow” Le lien peut être comptabilisé par les moteurs de recherche

2. Lien vers une ancre dans une même page

Pour créer un lien vers une “ancre” dans un article, il suffit de remplacer l’adresse de destination par une ancre correspndant à une id.
Par exemple :

1
<a href="#destination" > Le texte de mon lien</a>

Il faut ensuite placer *id=”destination” dans une balise à l’endroit où on veut amener le visiteur.

Par exemple :

1
<p id="destination"> Le texte qu'il faut absolument lire </p>

Pour accéder à un texte placé en bas de page, cliquer sur ce lien

balise a href

3. Lien vers une ancre dans une autre page

Pour être redirigé vers un autre article, à un emplacement précis, il suffit de rajouter l’id de l’ancre ou l’on souhaite se rendre, à la suite de l’adresse de la page et précédé de #.

Par exemple : Lien vers un paragraphe d’un autre article

La syntaxe du lien est la suivante :

1
<a href="/article/#destination2" >Cliquer ici</a>

4. Remonter en haut de page


Pour remonter en haut de page, on procède de la même manière :

  • Un id=”retour” a été placé dans une balise en début d’article.
    1
    <p id="retour"> Retour vers le haut de page </p>
  • Le lien de retour
    1
    2
    <p id="retour"> Retour vers le haut de page </p>
    <a href="#retour">Retour vers le haut de page</a>

Exemple : Retour vers le haut de page

N’hésitez pas à partager cet article.

Partager