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 e-mail 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.

Read more:
feedly logo
Après la fin de Google Reader, le bilan.

Il y a quelques mois, Google annonçait la fin de son lecteur de flux RSS, Google Reader pour le mois...

piskel
Piskel : Créez des sprites animés professionnels en ligne

Si vous voulez créer des sprites en pixel art pour vos jeux. Des sprites animés professionnels comme on en trouve dans...

rss graffiti
Comment publier automatiquement vos articles sur FaceBook ?

Vous avez un compte FaceBook ou une Fanpage FaceBook et vous souhaitez que vos articles WordPress soient directement publié sur...

Close