Les liens en HTML : la balise a et l'attribut href

Par Sam Accolade · Publié le 27 octobre 2017 · Mis à jour le 11 août 2026

Le lien hypertexte est l'invention qui a donné son nom au Web : une toile de pages reliées entre elles. Quand j'ai commencé à apprendre le HTML en 2017, le soir et le week-end, la balise a est celle qui m'a donné pour la première fois l'impression de construire un vrai site : deux pages reliées par un simple clic. Dans ce cours, nous allons voir comment créer un lien, la différence entre chemin absolu et chemin relatif, les ancres pour naviguer à l'intérieur d'une même page, l'ouverture dans un nouvel onglet et une bonne pratique trop souvent négligée : le choix du texte du lien.

Ce cours suppose que vous savez déjà organiser le contenu d'une page. Si ce n'est pas encore le cas, commencez par le cours sur les balises qui structurent le texte, puis revenez ici.

Petit rappel de vocabulaire avant de démarrer : une balise peut recevoir des attributs, et chaque attribut reçoit une valeur. Si ces mots restent flous, la définition d'un attribut dans le glossaire vous remettra en selle en trente secondes.

La balise a et l'attribut href

Un lien se crée avec la balise a (pour « anchor », l'ancre en anglais). La destination est indiquée par l'attribut href, et le contenu placé entre la balise ouvrante et la balise fermante devient la zone cliquable :

<p>
  Je vous recommande <a href="https://developer.mozilla.org/fr/">la documentation MDN en français</a> pour approfondir.
</p>

Sans la moindre ligne de CSS, le navigateur applique aux liens un style reconnaissable entre mille. Mesuré dans Chrome pendant la rédaction de cette mise à jour : texte bleu (rgb(0, 0, 238)), souligné (text-decoration: underline) et curseur en forme de main (cursor: pointer) au survol. Les liens déjà visités passent classiquement au violet. Nous verrons comment personnaliser tout cela dans le cours pour donner du style à une page grâce au CSS.

Enfin, la zone cliquable n'est pas limitée au texte : vous pouvez placer une image entre les deux balises, et c'est l'image entière qui devient le lien. Nous y reviendrons dans le cours dédié à la façon d'insérer une image.

Le chemin absolu : lier vers un autre site

Une URL complète, qui commence par https://, désigne une page de façon unique sur tout le Web : on parle de lien absolu. C'est la forme à utiliser dès que la destination n'est pas sur votre propre site. Si le rôle exact d'une URL reste abstrait pour vous, le cours qui explique comment fonctionne un site web détaille ce qui se passe entre le navigateur et le serveur au moment du clic.

<a href="https://devenezdeveloppeur.fr/">le blog Devenez Développeur</a>

Le chemin relatif : lier les pages de votre propre site

Pendant que votre site est en construction sur votre ordinateur, vos pages n'ont pas encore d'adresse publique. Pour les relier entre elles, on utilise un chemin relatif : au lieu d'écrire l'adresse complète, on décrit le trajet depuis le fichier courant jusqu'au fichier de destination. Trois cas couvrent l'immense majorité des besoins.

Deux pages dans le même dossier

C'est le cas le plus simple : la cible du lien est le nom du fichier de destination, avec son extension .html :

<a href="contact.html">Me contacter</a>

Vers une page dans un sous-dossier

Si la page de destination se trouve dans un sous-dossier, par exemple blog, on écrit le nom du dossier, un slash, puis le nom du fichier :

<a href="blog/article.html">Lire mon premier article</a>

Vers une page dans le dossier parent

Dans le sens inverse, ../ fait remonter d'un dossier. Depuis blog/article.html, on rejoint une page à la racine du site ainsi :

<a href="../contact.html">Me contacter</a>

Pour vérifier ces règles noir sur blanc, j'ai monté une page de test dans Chrome pendant la rédaction, avec pour adresse de base https://monsite.fr/blog/articles/page1.html, puis j'ai relevé l'adresse réellement calculée par le navigateur pour chaque lien :

• href="page2.html" mène à https://monsite.fr/blog/articles/page2.html (même dossier) ;
• href="../page2.html" mène à https://monsite.fr/blog/page2.html (le ../ a fait remonter d'un dossier) ;
• href="/contact.html" mène à https://monsite.fr/contact.html : un chemin qui commence par / repart toujours de la racine du site, quel que soit l'endroit où se trouve la page courante.

Un conseil hérité de mes propres tâtonnements de débutant : ne mettez ni espace ni accent dans vos noms de fichiers. Un fichier nommé page 2.html donne une URL laide et fragile ; préférez page-2.html, tout en minuscules, avec des tirets.

Les ancres : un lien vers un endroit précis de la page

Sur une page très longue, vous pouvez envoyer le visiteur directement à la section qui l'intéresse, sans qu'il ait à faire défiler l'écran. C'est le principe du sommaire cliquable en haut d'un long article. Ce type de lien se construit en deux temps.

D'abord, on pose un point de repère, l'ancre, en ajoutant un attribut id à l'élément visé. Un id doit être unique dans la page : choisissez un nom en rapport avec le contenu. Ensuite, on crée un lien dont la cible est cet id précédé du signe # :

<!-- Le lien, par exemple dans un sommaire en haut de page -->
<a href="#kangourous">Aller à la partie sur les kangourous</a>

<!-- L'ancre, plus bas dans la page -->
<h2 id="kangourous">Les kangourous</h2>

J'ai mesuré le comportement dans Chrome sur une page de test d'environ 3 900 pixels de haut : au clic sur le lien, la fenêtre a défilé d'un coup de 0 à 2 846 pixels pour amener le titre visé à l'écran, et l'ancre est venue s'ajouter à la fin de l'URL. Ce détail est précieux : une URL avec son ancre peut se partager, et elle amènera directement votre lecteur à la bonne section.

Les deux formes se combinent : href="page2.html#kangourous" ouvre une autre page et y descend jusqu'à l'ancre. C'est exactement ce que fait le lien vers le glossaire au début de ce cours.

Ouvrir dans un nouvel onglet : target="_blank" et rel="noopener"

Par défaut, un lien remplace la page courante. En ajoutant l'attribut target avec la valeur _blank, le lien s'ouvre dans un nouvel onglet et votre page reste ouverte derrière. La convention veut qu'on l'accompagne de rel="noopener" :

<a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener">la documentation MDN (nouvel onglet)</a>

Pourquoi ce rel="noopener" ? Historiquement, une page ouverte via target="_blank" recevait une référence vers la page d'origine (window.opener) et pouvait s'en servir pour la manipuler, par exemple la rediriger à votre insu. J'ai vérifié le comportement actuel dans Chrome pendant la rédaction : même sans rel, le nouvel onglet reçoit désormais window.opener === null, car les navigateurs récents appliquent cette protection d'office. Écrire rel="noopener" reste la bonne habitude : l'intention est explicite et les navigateurs plus anciens sont couverts. À l'inverse, rel="opener" rétablit volontairement l'accès (je l'ai mesuré aussi : window.opener n'est alors plus nul) ; ne l'utilisez que si vous savez précisément pourquoi.

Dernier point de bon sens : n'imposez pas le nouvel onglet à tout va. Réservez target="_blank" aux cas où le visiteur perdrait quelque chose en quittant la page (un formulaire en cours, une vidéo), et signalez l'ouverture dans le texte du lien, comme le « (nouvel onglet) » de l'exemple ci-dessus : les personnes qui naviguent au lecteur d'écran vous en sauront gré.

Le texte du lien : « cliquez ici », le contre-exemple parfait

Une confession pour finir : pendant des années, la première version de cet article, écrite en 2017, contenait elle-même plusieurs liens dont le texte était « cliquez ici ». Pour un cours consacré aux liens, difficile de faire pire. Cette mise à jour est l'occasion d'en faire un contre-exemple en bonne et due forme.

Un texte de lien doit décrire sa destination, pour trois raisons. D'abord la lecture : en survolant une page, l'œil s'accroche aux liens soulignés ; « cliquez ici » ne dit rien, alors qu'un texte descriptif s'auto-suffit. Ensuite l'accessibilité : les lecteurs d'écran permettent de lister les liens d'une page hors de leur contexte, et une liste de « cliquez ici » est inutilisable. Enfin le référencement : les moteurs de recherche se servent du texte des liens pour comprendre le sujet de la page de destination.

<!-- À éviter : le texte du lien ne dit rien de la destination -->
<p>Pour consulter le glossaire, <a href="/glossaire/">cliquez ici</a>.</p>

<!-- Mieux : le texte décrit la destination -->
<p>Pour retrouver toutes les définitions, consultez <a href="/glossaire/">le glossaire du site</a>.</p>

La règle tient en une phrase : le texte d'un lien doit rester compréhensible lu tout seul, sorti de sa phrase.

Conclusion

Récapitulons. Un lien se crée avec la balise a et son attribut href. L'adresse peut être absolue (une URL complète en https://, pour pointer vers un autre site) ou relative (le trajet depuis le fichier courant : page.html, dossier/page.html, ../page.html). Une ancre #id mène à un endroit précis d'une page, target="_blank" accompagné de rel="noopener" ouvre un nouvel onglet, et le texte du lien décrit toujours sa destination.

Vous savez maintenant relier vos pages entre elles et vers le reste du Web. Dans le prochain cours, nous donnerons un peu de vie à tout cela avec les images. À bientôt, Sam.