Comment utiliser la balise a href en HTML ? Le guide complet

Article publié le lundi 23 janvier 2023 et mis à jour le samedi 20 janvier 2024.

Comment utiliser la balise a href en HTML ?

En HTML, les liens permettent aux utilisateurs d’un site de voyager de page en page. On utilise la balise HTML a avec l’attribut href pour ouvrir des hyperliens sur une même page, une page différente ou avec un protocol différent.

Dans sa forme sa plus simple elle ressemble à ça :

<a href="https://www.commentcoder.com">Texte d'ancre</a>

Apprenez ce qu’est l’attribut href de la balise a en HTML, comment ajouter les différents types de liens pour mieux guider les utilisateurs sur votre site.

Découvrez tout dans ce guide complet sur la balise a href en HTML.

Qu’est-ce que la balise “a” en HTML ?

La balise a en HTML est une balise qui permet notamment de naviguer vers une autre page. Elle est le plus souvent composée d’une balise ouvrante <a>, d’un attribut href contenant un lien comme valeur, d’un texte d’ancre et d’une balise fermante </a>.

<a href="https://www.commentcoder.com">Texte d'ancre</a>

Il y a plein d’autres manières d’utiliser la balise a et c’est ce qu’on va découvrir dans la suite de cet article.

Qu’est-ce que l’attribut de lien “href” en HTML ?

L’attribut href sert a spécifier un lien vers une page interne ou externe à un site. Il s’applique à la balise HTML a et n’est pas obligatoire depuis HTML5. Son nom vient de l’anglais Hypertext REFerence qu’on peut traduire comme une référence à un lien hypertexte.

Quelles sont les options de la balise de lien “a” ?

En plus de l’attribut href, on peut passer différentes options ou attributs optionnels à la balise a.

Les options les plus souvent utilisées sont les suivantes :

  • target : Elle permet d’ouvrir un lien dans un nouvel onglet ou une nouvelle fenêtre d’un navigateur. Par défaut à _self, c’est avec la valeur _blank qu’on le lien dans une nouvelle page.
  • rel : Elle désigne la relation entre la page courrante et la page vers laquelle on pointe. Vous retrouverez souvent les valeurs noreferrer noopener car ça permet de ne pas donner du “jus de lien” vers le lien fourni.

Il existe de nombreuses autres options comme attributs de la balise html a en plus des 3 qu’on connait déjà (href, target et rel), en voici quelques-unes : download, hreflang, media, ping, referrerpolicy ou encore type.

Qu’est-ce qu’un hyperlien relatif et absolu ?

On a deux options quand on fournit un lien vers vers une page avec la balise a et l’attribut href en HTML. On peut lui donner un hyperlien absolu ou bien relatif.

Un lien absolu est un lien qui continent l’entièreté d’un lien vers une page web. Par exemple https://www.commentcoder.com/html-a-href/.

Un lien relatif ne contient que le chemin relativement à la page sur laquelle on se trouve. Par exemple /html-a-href/. Il faudra donc que ce soit vers une page qui point vers le même nom de domaine.

👨‍💻 Vous pouvez voir les liens absolus et relatifs comme les chemins absolus ou relatifs qu’on utilise dans un terminal.

Comment fonctionne a href en HTML ?

L’élément HTML <a> couplé à son attribut href= créent un lien hypertexte vers une autre page, un fichier, un numéro de télephone, une adresse email, une commande JavaScript, un endroit sur la même page ou tout autre type de lien comme un lien vers le protocol ftp.

Quels sont les différents types de lien href ?

Il existe différentes types de valeurs qu’on peut passer en lien à l’attribut href en HTML. Voici quelques-unes d’entres-elles :

Comment reconnaître un lien sur une page ?

On peut facilement repérer un lien sur une page car ils ont souvent un style différent, ils sont par exemple soulignés et de couleurs différente. Un lien hypertexte avec la balise a et l’attribut href changera également le curseur de votre souris quand vous passez dessus.

Quels navigateurs supportent la balise HTML a ?

Tous les navigateurs internet récents supportent la balise HMTL a, voici une liste non-exhaustive de certains d’entre-eux :

  • Google Chrome (et les autres navigateurs basés sur Chromium)
  • Microsoft Edge
  • Firefox version
  • Opera
  • Safari
  • Internet Explorer

Qu’est-ce que href=”#” et pourquoi l’utiliser ?

L’attribut href avec la valeur ”#” permet de naviguer en haut de la page.

<a href="#">Se rendre en haut de la page</a>

Historiquement on utilisait # comme placeholder pour la balise a comme elle nécessite de passer une valeur à l’attribut href. Depuis HTML5 on n’a plus besoin de passer une valeur à href et on a heureusement trouvé de meilleures solutions pour créer des liens vides !

Comment créer un lien vide en HTML ?

Pour créer une redirection qui ne mène nul part, on utilise la balise html a avec un script qui ne fait rien passé en attribut href.

<a href="javascript:void(0)">Lien vers nul part</a>

Certains codeurs HTML utilisent un symbole # passé à href <a href="#">...</a>. Le problème avec cette technique est que vous allez être rediriger en haut de page, c’est pour ça qu’on préferera utiliser le petit script nul : javascript:void(0).

Aller plus loin en HTML !

Bravo ! Vous connaissez maintenant tout sur la balise a et l’attribut href en HMTL 🎉

Comme on l’a vu ensemble, on peut passer bien d’autres choses qu’un simple lien à la balise a.

C’est pour ça qu’avoir une bonne maîtrise des concepts de bases en informatique, comme les balises HTML, est important.

Comment Coder

Je m'appelle Thomas. J'ai commencé à coder dans mon enfance. Depuis ma sortie de la première promo de l'École 42, j'ai développé des centaines d'applications et sites web. Sur ce blog, je vous donne les meilleurs conseils et astuces pour apprendre comment apprendre à coder efficacement.