Comment faire un lien d’ancre sur une page ?

Opticlic Marketing internet/ Marketing Web Montréal/ 0 comments

Sommaire:

  1. Le lien hypertexte
  2. Le lien d'ancre
  3. Comment faire un lien d'ancre ?

Le lien hypertexte

Le lien hypertexte ou hyperlien, est un lien qui se positionne sur un à plusieurs mots ou une image et permet de passer d'une page web consultée à une autre en cliquant dessus. Il y a deux sorte d'hyperlien, celui interne et celui externe.

Un hyperlien interne vous conduira vers une autre page d'un même site. Un lien externe vous conduira vers une autre page d'un autre site web que celui qui contient le lien hypertexte. Mais la structure du lien demeure semblable.

Exemple d'un hyperlien vers une page du même site: 

<a href="https://monsite.com/lien-hypertexte">Lien hypertexte internet</a>

Exemple d'un hyperlien vers un autre site:

Exemple: <a href="https://autresite.com/lien-hypertexte">Lien hypertexte externe</a>

La majorité d'entre vous connaissez déjà la fonction d'un lien hypertexte qui sert à naviguer entre les pages d'un site et hors ce même site. Exemple: <a href="https://monsite.com/lien-hypertexte">Lien hypertexte</a> Mais aujourd'hui, je veux vous parler des liens d'ancre qui sont vraiment utiles quand vous créez votre site web.

Le lien d'ancre

La fonction première d'un lien d'ancre et de pointer sur la même page un endroit précis. Si vous avez une page de votre site web qui renferme une grande quantité d'information, vous aurez envie de créer un sommaire qui comportera les titres de vos chapitres. Ce sommaire pour servir aux visiteurs d'aller directement sur la section de votre page qui l'intéresse vraiment. Comme celui que j'ai créé pour donner un exemple de l'utilité des liens d'ancre.

Comment faire un lien d'ancre ?

Il est facilement réalisable, car il suffit d'attribuer à l'élément vers lequel on veut pouvoir pointer un identifiant (avec l'attribut HTML id) et d'y associer un lien débutant par le caractère dièse #, suivi du nom de cet identifiant. Voici un exemple d'un lien débutant par un dièse http://monsite.com/#monancre , Pour ce qui est de l'identifiant cela peut ressembler à ceci: <div id="mon-ancre">...</div>

Vous pouvez aussi utilisez les balises H1, H2, etc. Ce qui donnerait ceci:

<h1 id="ancre" style="text-align: center;">Mon ancre sur ma page</h1>

Une fois l'ancre en place, il ne restera qu'à faire un lien en sa direction

<a href="#ancre">Les dernières nouvelles</a>

Leave a Comment

Votre adresse de courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*