HTML

HTML5

HTML5 - Élément ancre et le lien d’ancrage

L’ancre indique un point ou section précise d’une page Web. Ajoutée à un hyperlien, dit « lien d’ancrage », elle permet d’accéder directement à une section d’une page Web sans faire défiler la page manuellement. Directement dans le menu ou encore en le partageant dans un courriel ou sur les médias sociaux par exemple. Mais encore faut-il avoir une bonne raison. Car si vous avez besoin d’un hyperlien vers une section de page, c’est peut-être qu’il faut créer une page pour cette section ?

Sinon, l’ancre est idéale dans un sous-menu en haut d’une page pour rejoindre les rubriques d’une page plus ou moins longue. Accompagné bien sûr d’un retour à l’ancre du sous-menu. On retrouve aussi l’ancre dans des sites de type « one page » (une page). Avec un défilement fluide c’est magique.

L’ancre permet aussi d’offrir la possibilité aux autres webmestre de faire référence à un contenu précis. Et donc d’envoyer des signaux de pertinence forts aux moteurs de recherches, favorisant ainsi le référencement de votre page. Garder à l’esprit qu’un lien doit toujours être le plus attrayant, concis et explicité possible. Et éviter à tout prix les « Cliquer ici » par exemple ! Si vous utilisez beaucoup les liens d’ancrage vers le même contenu de votre site, variez vos mots-clés et surtout n’abusez pas de cette technique. L’algorithme Penguin de Google examine les mots-clés dans les liens d’ancrage et pourrait suspecter un abus.

L’ancre

L’ancre est un simple identifiant unique d’une balise qui marque un endroit précis de la page. C’est à dire l’attribut « id » :

<div id="monancre">
  ...
</div>

Pour faire un lien dit d’ancrage permet vers l’ancre, il faut utiliser le symbole digit ou numéro « # » et l’identifiant de l’ancre :

<a href="#monancre">
  Lien vers une ancre
</a>

Et ajouter l’adresse de la page si l’ancre est sur une autre page :

<a href="page.htm#monancre">
  Lien vers page et une ancre
</a>

Utiliser un élément titre ...et un menu fixe

Comme je disais plus haut, tous les éléments HTML font l’affaire pourvu qu’il y ait un identifiant (id). Ça ne fait aucune différence. Par contre l’ancre est en principe lié à une section qui devrait avoir un titre. Alors, pourquoi ne pas l’exploiter et normaliser le code de vos pages. Un id, un titre, voilà qui parle.

<article>
  <header>
    <h2 id="monancre">Section de ma page</h2>
  </header>
  <p>...</p>
</article>

Le problème avec cette méthode plus sémantique est quand on utilise un menu fixe, ce qui est plutôt fréquent dans des sites de type « one page ». Quand le menu est fixe en haut de la page, le titre disparait sous le menu ! Malheureusement, ce n’est pas possible d’ajouter une marge pour régler ce problème. Vous pouvez utiliser le conteneur, ici <article> et ajouter des sauts de ligne <br />. Ce qui n’est pas très propre. Mais il y a bien mieux, si la marge ne fonctionne pas, on peut simuler en CSS des sauts de ligne devant tous les éléments titres avec un attribut « id » !

Dans l’exemple suivant, le sélecteur cible seulement les éléments h2 avec un id et lui ajoute devant un bloc avec une hauteur en guise de marge et une marge négative équivalente.

h2[id]:before {
  content:'';
  display:block;
  height:75px;
  margin-top:-75px;
  visibility:hidden
}

Et ça fonctionne très bien, sans avoir besoin de se préoccuper du menu. On peut faire la même chose sur plusieurs balises. Maintenant, le menu est probablement plus gros sur un ordinateur de bureau qu’un téléphone intelligent. Il suffit alors d’ajouter une règle avec une requête média (media queries). Le code CSS suivant, combiné au précédent, permet d’ajouter une marge de 75 pixels par défaut (mobile first) et une marge de 100px pour les écrans faisant plus de 768 pixels :

@media (min-width:768px){
  h2[id]:before {
    height:100px;
    margin-top:-100px
  }
}

<style>
  html {
    scroll-behavior: smooth;
  }
</style>

Exemple complet avec lien d’ancrage sur l’ancre

Cet exemple complet ajoute un petit CSS pour afficher le lien d’ancrage après le titre. Cette technique n’est pas très esthétique pour un site de type « One page » mais peut s’avérer fort pratique pour de lourdes documentations. Non seulement elle permet de copier le lien d’ancrage, elle permet aussi de faire défiler la section précisément en haut de la page pour poursuivre la lecture sans utiliser la barre de défilement.

<!doctype html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="application-name" content="Neural v7.3.4" />
    <meta name="author" content="Django Blais, Trucsweb.com" />
    <title>L'élément ancre et le lien d'ancrage - Trucsweb.com</title>
    <meta name="description" content="Exemple de lien d'ancrage avec menu fixe." />
    <style>
      html {
        padding:0;
        scroll-behavior: smooth
      }
      body {
        font-family: Arial, sans-serif;
        background-color: #d6d3ce;
        margin-top:75px;
        transition: all .3s
      }
      @media (min-width:768px) {
        body {
          margin-top: 100px
        }
      }
      .contenu {max-width:1000px;margin:0 auto;}
      .navigation {
        overflow: hidden;
        background-color: #5d625c;
        position: fixed;
        left:0;
        top: 0;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        transition: all .3s
      }
      @media (min-width:768px) {
        .navigation {
          height: 85px
        }
      }
      .navigation a {
        float: left;
        display: block;
        color: #eeeeee;
        text-align: center;
        padding: 15px 18px;
        text-decoration: none;
        font-size: 18px
      }
      .navigation a:hover {
        color: #1c87c9
      }
      h2[id]:before, body[id]:before {
        content:'';
        display:block;
        height:75px;
        margin-top:-75px;
        visibility:hidden
      }
      @media (min-width:768px) {
        h2[id]:before, body[id]:before {
          height:100px;
          margin-top:-100px
        }
      }
      h2[id] .lien-ancrage {
        font-weight:400;
        padding-left: 0.4em;
        color:rgba(13,110,253,0.5);
        transition:color 0.15s ease-in-out;
        display:none
      }
      h2[id]:hover .lien-ancrage {
        color:#0d6efd;
        display: inline;
        text-decoration:none
      }
      .retour {
        float:right;
      }
      .bouton {
        color: #fff;
        padding: 4px;
        background-color: #428bca;
        border: solid 1px #357ebd;
        line-height:16px;
        text-decoration: none;
      }
    </style>
  </head>
  <body id="haut">
    <nav class="navigation">
      <div class="contenu">
        <a href="#haut">Accueil</a>
        <a href="#monancre1">Section 1</a>
        <a href="#monancre2">Section 2</a>
      </div>
    </nav>
    <div class="contenu">
      <h1>Ancre HTML - Trucsweb.com</h1>
      <p>...long texte...</p>
      <article>
        <header>
          <h2 id="monancre1">Section 1 de ma page<a class="lien-ancrage" href="#monancre1">#</a></h2>
        </header>
        <p>...long texte...</p>
        <p><a href="#haut" class="retour bouton">↑</a></p>
      </article>
      <article>
        <header>
          <h2 id="monancre2">Section 2 de ma page<a class="lien-ancrage" href="#monancre2">#</a></h2>
        </header>
        <p>...long texte...</p>
        <p><a href="#haut" class="retour bouton">↑</a></p>
      </article>
    </div>
  </body>
</html>

Voilà qui conclut ce petit tutoriel. Je vous invite à consulter le tutoriel « Bouton « Retour en haut » en pur JavaScript » pour ajouter un bouton « retour en haut ».