Sélectionner une page

Comment créer une ancre de lien ?

Avr 25, 2019 | 0 commentaires

Les liens hypertexte sont généralement des chemins qui vont permettre à un internaute de naviguer d’une page à une autre. En réalisant une ancre de lien vous pourrez alors proposer à vos internautes de se rendre directement sur une section spécifique de la même page. Créer une ancre de lien sur vos contenus est une manière très efficace de faciliter la navigation de vos internautes. Très à la mode dans la création de sommaire ou encore sur les sites one page, les ancres de lien sont aussi de plus en plus appréciées des moteurs de recherche.

Une ancre de liens c’est quoi ?

Une ancre de lien est un lien interne à une page permettant de vous rendre directement sur une section spécifique. Créer une ancre de lien peut être intéressant dans différents cas :

  • La création de menu
  • La création de sommaire
  • La mise en avant de solution…

Comment créer une ancre de liens ?

Dans les faits, créer une ancre de lien est assez simple. Il s’agit systématiquement de mettre en place deux lignes de code. La première ayant pour objectif de créer un lien sur un texte défini par vos soins et qui renvoie vers un identifiant. La seconde correspondant à l’emplacement à rejoindre et qui va contenir le fameux identifiant.

Créer une ancre de lien pour rejoindre une section

L’ancre de lien classique a donc pour objectif de rejoindre une section de votre page. Pour cela, il suffit de mettre en place la ligne de code suivante en tant que lien :

<a href= »#icivotreidentifiant« >ici votre texte avec le lien</a>

En rouge : En rouge vous retrouvez le code qui permet de faire le lien vers votre section qui détient ce même identifiant.

En vert : En vert, intégrez le texte qui sera visible et sur lequel vous aurez votre lien.

Pour que cela fonctionne, vous devez toujours garder le # en début d’identifiant et bien entendu garder le même identifiant (à la lettre près) que celui de votre ancre. Ensuite, créez votre seconde ligne de code, l’ancre :

<div id= »icivotreidentifiant« >ici votre texte avec le lien</div>

Cette ancre sera donc à intégrer là ou vous souhaitez mettre en place votre lien interne. Vous retrouvez en rouge l’identifiant présent sur le lien (sans le # cette fois-ci) ainsi que le texte qui peut changer en fonction de vos besoins.

Voici le résultat pour que vous puissiez voir dans les faits :

ici la ligne de code 2 : l’ancre

Créer une ancre de lien pour retourner en haut de page

Lorsqu’il s’agit de mettre en place un retour en haut de page, très pratique sur des contenus long, la logique reste la même. Vous aurez vos deux lignes de code mais cette fois-ci, votre ancre devra se trouver en haut de votre page. Voici un exemple de fonctionnement :

<a id= »haut »>avec ou sans texte ici</a> 

Représente l’identifiant ou faire le lien

<a href= »#haut »>haut de page</a>

Représente votre lien

Vous pouvez voir un exemple du résultat sur nos pages en bas à droite en cliquant directement sur le bouton de retour en haut de page :

ancre de lien de retour en haut de page

Faire un lien sur une section de page depuis une autre page

Si les ancres de lien servent principalement à défiler rapidement sur une page, vous pouvez aussi vous en servir pour renvoyer sur une section depuis une autre page. Le fonctionnement reste relativement identique sauf pour le lien.

Vous devrez donc mettre en place votre identifiant à l’endroit où faire le lien (cela ne change pas) :

<div id= »lien »>votre texte</div>

En revanche, le code du lien sera différent puisque vous devrez citer la page :

<a href= »monsite.com/urlpage/#lien »>votre texte</a>

Facile non ?

Pourquoi créer des ancres de liens ?

Créer des ancres de lien a pour seul objectif réel de faciliter la navigation de l’internaute sur vos pages en lui faisant gagner du temps. Il pourra ainsi se rendre directement sur les sections de page les plus pertinentes en fonction de son besoin réel. Cette notion d’expérience utilisateur est reprise dans nos formations UX design.

Comment créer une ancre de lien ?
5 (100%) 3 votes

Besoin de vous former en UX ?

Vous souhaitez améliorer l’ergonomie et l’UX de votre site ? Découvrez nos formations en UX design pour améliorer sensiblement la navigation des internautes sur votre site web de façon à mieux convertir vos visiteurs. 

0 commentaires

Soumettre un commentaire

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

Nos derniers articles de blog

Que faut il poster sur instagram pour son entreprise ?

Instagram est sans contestation le réseau social qui a le vent en poupe. Si à son lancement ce dernier semblait trop cantonné à un public féminin (comme Pinterest) et trop restrictifs pour de nombreuses entreprises (l'obligation du tout visuel), la situation a depuis...

Quel budget pour des campagnes Facebook Ads ?

Facebook est sans aucun doute une des plateformes publicitaire les plus populaire en 2019. Pour cause, elle offre de nombreuses possibilités de ciblage par profil et trouve son utilité pour tout type d'entreprise. Que votre cible soit jeune, agée, féminine, masculine,...

Formation E-Commerce : l’importance du webmarketing

Avec le développement de l'E-commerce et les nombreux entrepreneurs souhaitant se lancer dans cette aventure, il est logique de voir moult formations e-commerce être proposées aux professionnels et étudiants. Création de site internet, gestion des stocks, mise en...

Quand publier sur Facebook ?

Les heures pour publier sur Facebook sont une interrogation classique lorsque l'on souhaite gérer au mieux sa page. Quand poster ses publications est ainsi une question récurrente, souvent synonyme d'une interrogation bien plus large : quand publier sur Facebook pour...

Comment supprimer un avis sur google my business ?

Les avis Google My Business sont extrêmement importants pour de très nombreuses entreprises. On pense bien sûr en premier lieu aux commerces, bars et restaurants par exemple, mais ils ont également une très forte influence sur l'e-reputation de toutes les entreprises....

D'autres Articles ?

Vous voulez consulter d’autres articles pour progresser ? Retrouvez tous nos articles dédiés au digital sur le blog Academial