Comment faire un lien vers un endroit précis d’une page en HTML ?

Comment faire un lien vers un endroit précis d'une page ? 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 de votre contenu, vous vous êtes peut-être déjà demandé comment procéder.

Comment faire un lien sur la même page ? Un lien qui, au lieu de renvoyer vers le haut de page par défaut, renverra l'internaute vers un paragraphe spécifique ?

Dans cet article, je vais vous montrer comment faire en HTML, à l'aide des fragments d'URL. Derrière ce terme obscur en apparence, vous allez voir que c'est en réalité très simple !

Faire un lien en HTML

Pour comprendre comment faire un lien vers un endroit précis d'une 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 créer un lien vers un endroit précis d'une page, on va justement utiliser le principe du fragment d'URL.

Comment faire un lien vers un endroit précis d'une page avec un fragment d'URL

Faire un lien vers un endroit précis d'une page est souvent pratique quand on a un article très long, et que l'on veut permettre aux internautes d'accéder rapidement à une partie précise du contenu.

Je vous l'ai dit, un lien a besoin de deux choses : une ancre sur laquelle on clique… et une cible vers laquelle on va quand on clique. Alors, à l'échelle d'une même 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 une même page

Imaginons que je souhaite faire un lien vers la conclusion de mon article, un paragraphe qui s'appelle "L'intérêt d'un lien vers un endroit précis d'une page".

Comme c'est un sous-titre, il apparaît comme ceci dans le code de la page :

<h2>L'intérêt d'un lien vers un endroit précis d'une page</h2>

Sur votre propre blog, 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 Gutenberg, ça ressemble à ça :

Et si vous utilisez l'éditeur classique, le bouton ressemble à ça :

Sur Blogger, ça 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">L'intérêt d'un lien vers un endroit précis d'une page</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, comme "#conclusion" dans mon exemple.

Le lien va ressembler à ça, c'est donc en apparence un lien tout à fait normal : L'intérêt d'un lien vers un endroit précis d'une page

Et dans le code, il ressemblera à ça :

<a href="#conclusion">L'intérêt d'un lien vers un endroit précis d'une page</a>

Si vous cliquez dessus, cela vous emmène à la conclusion de l'article !

Quelques astuces pour personnaliser son lien

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 dans la feuille de style de votre blog cette ligne :

html{scroll-behavior:smooth}

C'est compatible à partir de Firefox 36, Chrome 61 et Safari 14 donc assez largement pris en compte !

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 d'une 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.

L'intérêt d'un lien vers un endroit précis d'une page

Une fois que vous avez réussir à faire un lien vers un endroit précis d'une page, le lien prend cette forme-là, avec le fragment d'URL à la fin :

https://www.notuxedo.com/lien-vers-endroit-precis-page#conclusion

C'est un lien que vous pouvez tout à fait utiliser n'importe où sur votre site pour orienter les internautes non pas vers l'article entier mais vers une partie précise, un gain de temps appréciable !

C'est très utile…

• Si vous aidez les gens et que vous souhaitez directement les diriger vers le paragraphe le mieux à même de répondre à leur question ;
• Si vous souhaitez structurer un article long, avec un sommaire : sur WordPress, cela peut se faire de manière automatisée avec un plugin de sommaire comme Table Of Contents Plus ;
• Si vous souhaitez 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.
• Pour créer un bouton de "retour en haut de page".

J'espère en tout cas avoir levé le mystère sur cette question qu'on me pose souvent !