Comment Créer un Lien d'Ancrage pour Accéder à une Partie Spécifique d'une Page

Un lien d'ancrage est un lien qui permet aux utilisateurs de parcourir une page de site Web. Il aide à faire défiler et à parcourir la lecture facilement. Une ancre nommée peut être utilisée pour créer un lien vers une partie différente de la même page (comme le défilement rapide) ou vers une section spécifique d'une autre page.

Créer un Lien d'Ancrage

Voyons comment accéder à une section marquée de la page en utilisant la balise <a> C’est assez simple!

  1. Ajoutez un attribut id à votre élément d'ancrage pour donner un nom à la section de la page. La valeur de l'attribut peut être un mot ou une phrase (lorsque vous utilisez des phrases, n'oubliez pas de ne pas utiliser d'espaces, utilisez plutôt des traits de soulignement).
<a id="anchor-name">Le nom de la section ici où vous voulez sauter</a>

Alternativement, vous pouvez également avoir les types d'ancrage suivants:

  1. ancrage dans un titre: <h2 id="anchor-name">Section name</h2>
  2. ancrage dans un image: <img id="anchor-name" src="/images/imgname.jpeg"/>
  3. ancrage dans une paragraphe: <p id="anchor-name">Paragraph name</p>
N’oubliez pas que chaque id ne peut apparaître qu’une fois dans une page.
  1. Créez un lien hypertexte à l'aide de l'id de la cible du lien, précédé de #.
<a href="#anchor-name">Aller à la partie de la page avec avec l'id “anchor-name” </a>

Maintenant vous êtes prêts! Ajoutez simplement le texte préféré et vous pourrez parcourir les sections de page.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main-content {
        height: 100vh;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <p class="main-content">
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l’industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et
      l’a brouillé pour en faire un cahier type. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la
      publication de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec un logiciel de publication assistée par ordinateur comme Aldus PageMaker, comprenant des versions de Lorem Ipsum. C'est un fait établi de
      longue date qu'un lecteur sera distrait par le contenu lisible d'une page lorsqu'il examinera sa mise en page. Lorem Ipsum a l'avantage de présenter une distribution de lettres plus ou moins normale, par opposition à l'utilisation de
      'Contenu ici, contenu ici', ce qui donne l'impression qu'il est lisible en anglais.
    </p>
    <p>Allez à <a href="#Lorem_Ipsum">haut</a>.</p>
  </body>
</html>

Comment styliser le lien d'ancrage sautant

Il est également possible de donner un style supplémentaire à l’ancre où vous sautez. Pour cette utilisation, ajoutez une balise <style> dans l'élément <head> et attribuez un style à la section à sauter en utilisant les propriétés de CSS color et background.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .main-content {
        height: 100vh;
        text-align: justify;
      }
      h2 {
        color: #1c87c9;
      }
      h2:target {
        color: white;
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <div class="main-content">
      <p>
        Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l’industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type
        et l’a brouillé pour en faire un cahier type. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la
        publication de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec un logiciel de publication assistée par ordinateur comme Aldus PageMaker, comprenant des versions de Lorem Ipsum.
      </p>
      <p>
        C'est un fait établi de longue date qu'un lecteur sera distrait par le contenu lisible d'une page lorsqu'il examinera sa mise en page. Lorem Ipsum a l'avantage de présenter une distribution de lettres plus ou moins normale, par
        opposition à l'utilisation de 'Contenu ici, contenu ici', ce qui donne un aspect lisible en anglais. De nombreux logiciels de publication assistée par ordinateur et éditeurs de pages Web utilisent maintenant Lorem Ipsum comme modèle
        de texte par défaut. Une recherche sur «lorem ipsum» permet de découvrir de nombreux sites Web encore à leurs balbutiements. Différentes versions ont évolué au fil des ans, parfois par accident, parfois exprès (humour injecté, etc.)
      </p>
    </div>
    <p>Allez à <a href="#Lorem_Ipsum">haut</a>.</p>
  </body>
</html>

Lien vers l'ancre d'une autre page Web

Vous pouvez également créer un lien vers votre lien d'ancrage à partir d'autres sites Web. Pour ce faire, ajoutez l'URL suivie de # et de la valeur d'ancrage. Il y a deux types de cette utilisation:

Lien vers une autre page du même domaine:

<a href="/learn-html/html-links.html#html_links">Allez vers les liens HTML sur notre site.</a>

Lien d’un autre site Web:

<a href="https://en.wikipedia.org/wiki/Main_Page#wikipedia">Allez à la page principale de Wikipedia.</a>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <p>
      Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l’industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et
      l’a brouillé pour en faire un cahier type. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la
      publication de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec un logiciel de publication assistée par ordinateur comme Aldus PageMaker, comprenant des versions de Lorem Ipsum.
    </p>
    <p>
      <a href="https://fr.w3docs.com/apprendre-html/les-liens-html.html#html_links">Allez vers les liens HTML sur notre site.</a>
    </p>
    <p>
      <a href="https://en.wikipedia.org/wiki/Main_Page#wikipedia">Allez à la page principale de Wikipedia.</a>
    </p>
  </body>
</html>