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 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 vote[s]

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

Comment créer un bon bandeau de réassurance ?

Les bandeaux de réassurance sont un grand classique sur de nombreux sites internet. Si ils sont surtout connus en e-commerce, les fameuses indications de retour gratuit, paiement sécurisé et livraison rapide par exemple, les bandeaux de réassurance se prêtent malgré...

Comment utiliser linkedin pour son entreprise ?

Réseau social de référence pour les professionnels, il faut dire que la concurrence viadeo n'aura pas fait long feu, LinkedIn est aujourd'hui une des places fortes des échanges entre professionnels. Il est néanmoins toujours délicat pour une entreprise de savoir...

Comment améliorer son référencement Amazon ?

Amazon est une marketplace incontournable pour de très nombreux e-commerçants au cours des dernières années. Il faut dire que la plateforme est presque devenue un réflexe pour de très nombreux internautes s'en servant comme un véritable moteur de recherche dès qu'il...

Comment voir et analyser les statistiques d’une page facebook

Les statistiques sont essentielles à la bonne gestion d'une page Facebook. N'importe quel community manager pourra vous dire qu'elles sont les meilleures alliées d'une stratégie social media bien menée. Ce sont en effet elles qui vous permettront d'évaluer...

Comment faire un audit social media

Gérer les réseaux sociaux d'une entreprise n'est jamais une chose facile, on manque parfois de recul sur la pertinence de ses actions et on se demande alors comment faire un audit social media. Avant de s'intéresser à la mise en pratique de cet audit, nous allons...

D'autres Articles ?

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