Ancre

3

La balise d'ancre <a> permet de connecter différentes ressources entre elles. Elle est généralement utilisée afin d'établir un lien vers un autre site web ou encore vers une section d'une page, mais elle peut aussi déclencher l'ouverture d'une fenêtre de courriel, un appel téléphonique, le téléchargement de fichiers, etc.

href

L'attribut href est l'attribut principal de la balise <a>. Il permet de définir la cible d'une ancre. Voyons cibles les plus courantes.

Vers un site externe

Pour faire un lien vers un site externe, il suffit de spécifier l'url du site en question dans le href. Par exemple:

<a href="https://google.ca">Google</a>

Vers une section de la page courante

Pour pointer vers une section de la page courante, il est possible de faire référence à l'id d'un élément en le préfixant par un #.

Par exemple, afin de pointer vers l'élément ayant un id section2, il serait possible de faire une ancre de la sorte:

<a href="#section2">Lien vers la section 2</a>

<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

Seul les id permettent de pointer vers un élément puisque les autres sélecteurs peuvent théoriquement faire référence à plusieurs éléments.

Pour faire en sorte que la page défile vers la section en particulier plutôt que d'y sauter directement, il est possible de spécifier la propriété scroll-behavior: smooth sur la balise HTML.

Voir le CodePen de Simon Arnold (@smnarnold).

Vers une section d'un site externe

Il est possible de combiner les deux options précédentes afin de pointer sur une section particulière d'un site externe. Pour ce faire, il suffit de spécifier l'url du site souhaité, lui ajouter un # et le id de la section visée.

Par exemple:

<a href="https://google.ca#section2">Google</a>

Courriel ✉️

L'attribut href peut aussi contenir une adresse courriel préfixée par: mailto: afin d'indiquer que le service de courrielleur par défaut de l'usager (Outlook, Gmail, etc.) devrait générer une nouvelle ébauche de message prêt à l'attention du courriel spécifié.

Par exemple:

<a href="mailto:exemple@gmail.com">Écrivez-moi!</a>

Téléphone 📞

L'attribut href peut aussi contenir un numéro de téléphone préfixée par: tel: afin d'indiquer que le système d'exploitation devrait devrait déclencher un appel au numéro mentionné si cette fonctionnalité est supportée par celui-ci (pratique surtout pour les appareils mobiles 📱).

Par exemple:

<a href="tel:5551234567">Appelez-moi!</a>

Target

  • _self (par défaut) ouvre le lien dans la même page.
  • _blank ouvre le lien dans une nouvelle page.

Pour en savoir plus, voir cet article MDN à propos des ancres.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme