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.

  • La structure de la balise <a>

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

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

Avec les attributs :

 title="texte affiché au survol" 
rel="dofollow ..." suivi par les moteurs de recherche, etc
  • Lien vers une ancre dans une même page <a>

 

Pour faire un lien vers une partie d’un article, il suffit de remplacer l’adresse de destination par une ancre du type :

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

et de placer

id="destination"

dans une balise à l’endroit où on veut amener le visiteur.

Par exemple :

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

Ce texte est placé en bas de page.
Pour y accéder, cliquez sur le lien

balise a href


  • Lien vers une ancre dans une autre page <a>

Pour aller à un endroit précis d’un autre article, 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 :
Cliquez sur ce lien, pour aller au résultat final de l’article précédent
La syntaxe du lien est la suivante :

<a href="http://outils-web.fr/comment-enlever-le-fond-dune-image/ 
  #destination2" >Cliquer ici pour aller au résultat final de 
l'article précédent</a>

N’oubliez pas l’espace entre l’adresse et #destination2

Un espace jusqu’à la fin de l’article

Le texte qu’il faut absolument lire

Vous venez d’être dirigé vers cette partie de l’article.
Pour remonter, on peut faire la même chose, avec un autre lien.

<p id="retour"> Retour vers le haut de page </p>
<a href="#retour">Retour vers le haut de page</a>

Un id= »retour » a été placé dans une balise en début d’article.
Retour vers le haut de page

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
guillemets
Les guillemets et WordPress.

Si pour vous, les guillemets WordPress, c'est  "je t'aime, moi non plus", alors cet article va vous intéresser. Bien souvent,...

mp3_player
La chanson de l’année 2012 + un lecteur mp3 pour site Web

Le début d'année, est souvent le moment des bilans et des rétrospectives. La meilleur chanson de l'année 2012 n'est pas celle...

Tour_Hanoi
Les Tours de Hanoi en JavaScript

Voici un petit Script Javascript utilisant la récursivité permettant de résoudre le problème des tours de Hanoï. Quel est le...

Fermer