Trucsweb.com

Trucsweb.com

HTML

HTML5

RDFFav

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

L’ancre est ajoutée à un hyperlien pour accéder directement à une section d’une page Web sans faire défiler la page manuellement.hyperlienHTML5 - Élément ancre et le lien d’ancrage

The Bluenose Wing ’n Wing (Auteur : William E. deGarthe - 1956)
The Bluenose Wing ’n Wing (Auteur : William E. deGarthe - 1956

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
  }
}
Défilement fluide CSS

Ajouter un défilement fluide à la page en une seule ligne CSS :

<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 ».

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Bonjour, Merci pour les éclaircissements, un très bon tuto. Félicitations
    64x64
    Pabingui Teddy Dora
    Date (GMT) : 2022-07-05 06:58:52 (UTC +0000)
    Date local : Tue Jul 05 2022 08:58:48 GMT+0200 (CEST)

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    8.5/10 sur 2 revues.
           Visites : 11414 - Pages vues : 11625
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @