Comment faire un lien vers un endroit précis d'une page web ? Voilà une question que l'on m'a posée de nombreuses fois, j'ai donc décidé d'y consacrer un article. Si vous écrivez un contenu très long et/ou que vous souhaitez faire référence à un paragraphe précis d'un contenu, vous vous êtes peut-être déjà demandé comment procéder. Et comment faire si l'on veut faire un lien vers un endroit précis d'une autre page ?
Dans cet article, je vais vous montrer comment procéder en HTML, à l'aide des fragments d'URL qui permettent de créer des ancres internes vers la zone de son choix.
Comment faire un lien en HTML : quelques fondamentaux
Pour comprendre comment faire un lien vers un endroit précis de la page, il faut d'abord savoir comment fonctionne un lien en HTML.
Dans le code de votre site, un lien ressemble à ça :
<a href="https://www.notuxedo.com">Cliquez ici</a>Ou à ça :
<a href="#conclusion">Cliquez ici</a>Ou encore à ça :
<a href="https://www.notuxedo.com/lien-vers-endroit-precis-page/#conclusion">Cliquez ici</a>Si ce charabia paraît obscur pour un débutant, chaque élément a en réalité un sens précis et une fois que vous l'avez compris, vous allez pouvoir beaucoup plus facilement vous l'approprier !
- "a" indique qu'il s'agit d'un lien vers un endroit spécifique du web. On veut "jeter l'ancre" quelque part, que ce soit en faisant un lien sur la même page ou en faisant un lien vers une autre page.
- "href" permet d'introduire la cible du lien. Autrement dit, l'endroit où il va vous conduire.
- Après le signe égal, on met entre guillemets la fameuse cible du lien : soit c'est l'URL d'une page précise sur le web, soit c'est ce que l'on appelle un fragment d'URL, un mot précédé par un dièse (comme #conclusion), soit c'est une combinaison des deux.
- Ensuite, vient l'ancre du lien, c'est-à-dire le texte sur lequel l'internaute peut cliquer pour accéder à la cible du lien (dans mon exemple, c'est "Cliquez ici").
- On ferme ensuite le lien à l'aide de la partie </a>, pour éviter que toute la page devienne cliquable !
Tous ces éléments sont codifiés, on ne peut pas décider qu'on va écrire "b href" ou "a hreference" parce que ça nous chante ;) En revanche, la cible du lien et son ancre sont personnalisables.
Pour faire un lien vers un endroit précis de la page, on va justement utiliser le principe du fragment d'URL.
Créer une ancre interne : lier vers un emplacement précis sur la même page
Je vous l'ai dit, créer un lien implique deux éléments principaux : une ancre sur laquelle on clique… et une cible vers laquelle on va quand on clique. Pour faire un lien vers un endroit précis de la page, vous allez aussi avoir besoin de ces deux éléments :
- Marquer l'emplacement vers lequel vous voulez orienter l'internaute (quel paragraphe ?)
- Créer le lien pour aller à cet emplacement.
Définir la cible du lien sur la page
Imaginons que je souhaite faire un lien vers la conclusion de mon article, un paragraphe qui s'appelle "Pourquoi utiliser une ancre interne ?"
Comme c'est un sous-titre, il apparaît comme ceci dans le code de ma page :
<h2>Pourquoi utiliser une ancre interne ?</h2>Sur votre propre site, peut-être que le titre sera entouré par d'autres types d'éléments de code à la place du h2, par exemple "h3" ou "div" mais le principe reste le même. On va ajouter un identifiant à cet élément afin de pouvoir ensuite le retrouver sur la page.
Vous allez commencer par basculer vers l'éditeur HTML de votre plateforme, qui permet de visualiser le code de l'article.
Par exemple, sur WordPress, il faut choisir l'éditeur de texte au lieu de l'éditeur visuel. Si vous utilisez l'éditeur de blocs, ça ressemble à ça :
Et si vous utilisez l'éditeur classique, le bouton ressemble à ça :
Au niveau de votre paragraphe, on va ajouter un identifiant avec le format id="votremot". Pensez à bien laisser un espace avant id et à écrire "votremot" en minuscules.
Par exemple :
<h2 id="conclusion">Pourquoi utiliser une ancre interne ?</h2>Créer le lien vers un paragraphe précis
Ensuite, vous pouvez créer votre lien comme vous avez l'habitude de le faire... sauf qu'au lieu d'indiquer une URL comme cible, on va indiquer le fragment d'URL que l'on a choisi, c'est-à-dire le l'identifiant précédé d'un signe dièse, comme "#conclusion" dans mon exemple.
Le lien va ressembler à ça, c'est donc en apparence un lien tout à fait normal : Pourquoi utiliser une ancre interne ?
Et dans le code, il ressemblera à ça :
<a href="#conclusion">Pourquoi utiliser une ancre interne ?</a>Si vous cliquez dessus, cela vous emmène à la conclusion de l'article !
Comment faire un lien vers un endroit précis d'une autre page ?
Le principe est exactement le même. Sur la page cible, vous allez marquer le paragraphe vers lequel vous souhaitez renvoyer avec un identifiant.
Mais au moment de faire le lien sur la page d'origine, au lieu de l'écrire comme ceci :
<a href="#footer">Pied de page de ma page d'accueil</a>Vous allez préciser après le "a href" l'URL de cette page cible où vous avez marqué le paragraphe, par exemple si c'est la page d'accueil de mon site :
<a href="https://www.notuxedo.com#footer">Pied de page de ma page d'accueil</a>Ainsi, l'ancre interne orientera à la fois vers une page donnée et vers un emplacement précis sur cette page.
Comment faire un lien dans le menu WordPress vers un endroit d'une page ?
Encore une fois, c'est le même principe. Commencez par marquer le paragraphe vers lequel vous souhaitez orienter l'internaute avec un identifiant, par exemple :
<h2 id="messervices">Mes services</h2>Ensuite, allez dans le menu Apparence > Menus de l'administration de WordPress et choisissez le menu à modifier. Dans la partie "Liens personnalisés", indiquez simplement l'URL de la page cible ainsi que l'ancre interne définie. Par exemple, si c'est la page d'accueil et que l'identifiant s'appelle "messervices", j'entrerai le lien suivant :
https://www.notuxedo.com#messervicesValidez en cliquant sur "Ajouter au menu".
Quelques astuces pour personnaliser le lien interne
Si vous êtes à l'aise avec l'idée de modifier un peu le code de votre site, voici quelques astuces supplémentaires pour optimiser un lien vers une même page !
Créer un défilement "doux"
Par défaut, quand on clique sur le lien, ça "saute" assez brutalement jusqu'à la section de la page qui vous intéresse. Si vous souhaitez un défilement plus doux, c'est très simple à réaliser via l'ajout d'une ligne dans votre feuille de style.
Ajoutez simplement cette ligne dans la feuille de style CSS de votre site :
html{scroll-behavior:smooth}Sur WordPress, cette ligne de code peut être ajoutée soit directement dans la feuille de style de votre thème enfant (fichier "style.css"), soit via la rubrique Apparence > Personnaliser si votre thème prévoit une zone pour ajouter du code CSS personnalisé.
Faire apparaître le titre du paragraphe lors du défilement
Par défaut, le lien vous emmène juste en-dessous de la zone cible que vous avez définie. Par exemple, si votre cible est le titre d'un paragraphe, l'internaute qui clique sur le lien verra la première ligne du paragraphe mais pas son titre.
Pour éviter ça, on peut inclure systématiquement une marge supérieure lors du scroll, qui permet de faire en sorte que le lien vers un endroit précis de la page affiche quand même le titre.
Ca se fait aussi en CSS, comme la première astuce, avec la propriété "scroll-margin-top". Si tous vos titres sont en "h2" par exemple, le plus simple est d'appliquer cette propriété par défaut à tous les h2 du site : ainsi, si vous utilisez régulièrement le système des ancres ou fragments d'URL pour créer un lien sur une même page, il défilera toujours "correctement".
On écrira ainsi :
h2{scroll-margin-top:2em}Là encore, le code est à insérer dans la feuille de style de votre site. Le code ne modifie la marge que dans le cas d'un défilement, il n'a donc pas d'impact sur les marges "normales" de votre site.
Pourquoi utiliser une ancre interne ?
Pour conclure cet article, évoquons quelques situations où faire un lien vers un endroit précis de la page se révèle très utile.
- Améliorer l'expérience utilisateur - C'est un moyen de diriger efficacement les internautes vers la section qui les intéresse le plus ou est la mieux à même de répondre à leurs besoins sans avoir à parcourir l'ensemble du contenu. C'est très utile dans le cas d'un article long.
- Organiser et structurer les contenus - Vous pouvez par exemple utiliser les ancres internes pour créer un sommaire sur vos articles d'information ou un menu propre à une page orientant l'internaute vers différentes sections de la page (description d'un service, prix, avis clients...). Ca permet de rendre l'information plus digeste et accessible.
- Augmenter le taux de conversion - Vous pouvez utiliser cette méthode pour créer des call-to-action à plusieurs endroits de la page : par exemple, vous avez un formulaire de devis ou de contact en haut de page et vous souhaitez créer des boutons, plus bas sur la page, pour que l'internaute puisse remonter vers ce formulaire en un clic.
- Optimiser la navigation - Dans les applications web et les sites à une seule page (Single Page Applications ou SPAs), les ancres peuvent être utilisées pour simuler une expérience multi-page alors que l'on reste en réalité sur la même page physique.
Ce sont quelques exemples de l'usage que vous pouvez faire de ce tuto, en espérant qu'il vous aidera !
