Sélectionner une page

Comment créer une ancre de lien ?

Avr 25, 20190 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.

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 changer l’ordre des articles WordPress ?

Comment changer l’ordre des articles WordPress ?

Si vous êtes féru d’écriture de contenu pour votre blog et que vous avez une véritable volonté éditoriale sur votre blog Wordpress, vous vous êtes peut-être déjà confronté à la problématique de changement d’ordre de ces dit articles. L’absence de fonctionnalité claire...

Comment améliorer son référencement Google My Business ?

Comment améliorer son référencement Google My Business ?

Avec leur omniprésence dans les résultats de recherche sur nom de marque mais également sur des éléments précis, les fiches Google My Business occupent désormais une place cruciale dans le référencement de certaines entreprises. Effectuez une recherche que Google...

Démarcher et contacter des influenceurs

Démarcher et contacter des influenceurs

Les influenceurs occupent une place croissante dans la communication des entreprises. Si certaines ont très vite prisent conscience de l'incroyable opportunité qu'ouvre ce nouveau mode de communications, même les retardataires s'y mettent aujourd'hui en constatant...

Pourquoi faire une formation SEO ?

Pourquoi faire une formation SEO ?

De plus en plus d'entreprises prennent conscience que le référencement naturel, aussi appelé SEO, est un enjeu majeur pour le développement de leur business. Cela s'accompagne également sur une prise de conscience concernant le travail à effectuer. Les demandes...

Comment choisir son logiciel emailing ?

Comment choisir son logiciel emailing ?

Il est toujours délicat de faire son choix de logiciel emailing. Entre Sendinblue, Activetrail, Mailjet, Mailchimp, Sarbacane, Newsletter2Go et des dizaines d'autres il n'est pas facile de s'en sortir, d'autant plus que chacun semble disposer d'avantages. Il suffit en...

D'autres Articles ?

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