<a>

La balise <a> est une petite abréviation d’anchor (qui veut dire ancre en anglais) en HTML.

Elle est utilisée pour créer des liens hypertexte, qui permettent de naviguer d’une page à une autre, de télécharger un fichier ou de rediriger vers une section spécifique d’un document.

C’est l’une des balises les plus fondamentale pour la navigation sur le Web. 😉

Structure de la balise <a>

La balise <a> utilise une structure dite inline (🇺🇸). Elle fonctionne également par paire il s'agit donc d'une balise qui englobe un élément.

• Une balise ouvrante <a> ;
• Une balise fermante </a>.

C'est-à-dire qu'elle ne provoque pas un retour à la ligne pour les éléments situés autour : elle laisse les éléments les uns à côté des autres. Utiliser une balise <a> dans un texte ne créera ainsi aucun retour.

Les liens fonctionnent toujours sous cette structure :

<a href="URL" [attributs]>Contenu cliquable</a>

Il est possible d'utiliser les liens pour faire de nombreuses choses ! Voyons chacun des cas pratiques.

Faire un lien vers un site internet externe

<a href="https://www.google.com">Rechercher sur Google</a>

Faire un lien vers une page de notre site internet

Il est possible de faire deux types de liens quand on veut rediriger sur une page de notre site internet.

Faire un lien vers une partie d'une page

On parle ici de lien vers une ancre. Il s'agit en fait d'un lien qui commence par un dièse (#) suivi du nom d'un id.

Par exemple :

<div id="presentation"></div>

...

<a href="#presentation">Maintenir le scroll sur "Présentation"</a>

Faire un lien vers une autre page

Il est également possible de faire un lien vers une autre page de notre site internet en précisant uniquement l'url relative.

<a href="/articles">Voir notre blog</a>

Faire un lien de téléchargement

Pour faire un lien qui provoque le lancement d'un téléchargement sur son clic, il suffit d'ajouter l'attribut download :

<a href="/files/guide.pdf" download>Télécharger le guide</a>

Faire un lien qui ouvre un email

La balise <a> permet aussi d'ouvrir automatiquement un nouvel email pour faciliter la vie de nos utilisateurs.

Pour cela, il faut simplement ajouter mailto: suivi de l'adresse email du destinataire.

<a href="mailto:hello@believemy.com">Envoyer un email</a>

Faire un lien pour composer un numéro de téléphone

Enfin, il est aussi possible d'ajouter un lien qui permet de composer un numéro automatiquement.

Comme pour l'envoi d'un email il faut préciser tel: suivi du numéro de téléphone à composer.

<a href="tel:+1234567890">Appeler ce numéro</a>

Attributs

La balise <a> propose de nombreux attributs ! Heureusement, seul certains d'entre-eux sont vraiment utilisés.

Voici une liste complète des attributs que nous pouvons utiliser pour les balises <a> :

• href - Pour définir l'URL cible du lien
• target - Pour définir où ouvrir le lien :
  • _self : dans la même fenêtre (choix par défaut) ;
  • _blank : dans un nouvel onglet ;
  • _parent : dans la fenêtre parent ;
  • _top : dans la fenêtre complète.
• rel - Pour définir la relation entre le lien et la page actuelle (très utile pour le référencement)  :
  • nofollow : les moteurs de recherche ne suivent pas ce lien ;
  • noopener et noreferrer : ils fonctionnent ensemble pour sécuriser l'ouverture d'un lien dans un nouvel onglet.
• download - Pour déclencher un téléchargement
• type - Pour définir le type MIME de la ressource cible
• ping - Pour fournir une URL sur laquelle des notifications seront envoyées quand le lien sera cliqué (pour un usage avancé)
• title - Permet de donner un nom qui s'affichera dans une petite infobulle quand le lien sera survolé par l'utilisateur

Par exemple, voici un lien qui affichera le texte "Ouvrir dans un nouvel onglet" sur un lien qui s'ouvrira dans un autre onglet du navigateur :

<a href="https://believemy.com" target="_blank" title="Ouvrir dans un nouvel onglet">
    Cliquez ici pour être redirigé
</a>

Compatibilité

La balise <a> est prise en charge par tous les navigateurs modernes et anciens.