Les liens

Le H de HTML signifie hypertexte : du texte qui renvoie vers d'autres textes. Un seul élément, a, crée tous les liens du web.

L'élément ancre

Un lien se crée avec l'élément <a>, pour anchor (ancre). Son attribut href contient l'adresse de destination, et son contenu est le texte sur lequel on clique. Dans <a href="https://developer.mozilla.org/">MDN Web Docs</a>, les mots MDN Web Docs apparaissent soulignés, et les activer charge cette adresse. Les liens fonctionnent avec une souris, un doigt ou le clavier : appuie sur Tab pour passer d'un lien à l'autre et sur Entrée pour en suivre un. Sans href, un <a> n'est qu'un espace réservé et on ne peut pas l'atteindre avec Tab.

Adresses absolues et relatives

Une URL absolue contient tout : le schéma (https:), le domaine et le chemin, par exemple https://example.com/menu/bread.html. Utilise-la pour les liens vers d'autres sites. Une URL relative omet les parties identiques à celles de la page actuelle. Sur une page située à https://example.com/menu/index.html, le lien bread.html désigne le fichier du même dossier, ../about.html remonte d'un dossier, et /contact.html part de la racine du site. Les liens relatifs continuent de fonctionner quand tout le site déménage vers un nouveau domaine.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Les liens dans la même page

Donne un id à n'importe quel élément, et un lien dont le href est un dièse suivi de cet id y saute directement. <a href="#hours"> fait défiler jusqu'à <h2 id="hours">. Un id doit être unique dans la page et ne peut pas contenir d'espace. Les longs articles s'en servent pour une table des matières, et beaucoup de sites placent tout en haut un lien d'évitement (Aller au contenu principal) pour que les utilisateurs du clavier n'aient pas à parcourir tout le menu avec Tab sur chaque page.

E-mail, téléphone et téléchargements

D'autres schémas ouvrent d'autres programmes. mailto:hello@example.com ouvre un nouveau message dans le logiciel de messagerie du visiteur, et tel:+82212345678 propose d'appeler le numéro sur un téléphone. Ajouter l'attribut download à un lien demande au navigateur d'enregistrer le fichier au lieu de l'ouvrir. Ces liens sont pratiques, mais dis ce qu'ils font dans le texte du lien, car personne ne s'attend à voir surgir un logiciel de messagerie.

Nouveaux onglets et bon texte de lien

target="_blank" ouvre le lien dans un nouvel onglet. Utilise-le avec modération : il retire le contrôle au visiteur, et le bouton Retour ne le ramène plus en arrière. Quand tu l'utilises, signale-le dans le texte du lien, par exemple (s'ouvre dans un nouvel onglet). Le plus important reste le texte du lien lui-même. Les utilisateurs de lecteurs d'écran affichent souvent la liste de tous les liens d'une page, et une liste de dix entrées qui disent toutes cliquez ici ou lire la suite ne leur apprend rien. Écris un texte qui a du sens hors contexte : Télécharger les horaires 2026, pas cliquez ici.

Par défaut, les navigateurs soulignent les liens et les colorent en bleu, et affichent les liens visités en violet. Tu peux changer le style des liens avec CSS, mais garde autre chose que la couleur seule, comme le soulignement, pour que les personnes qui ne distinguent pas les couleurs voient quand même quels mots sont des liens. Quand un lien a le focus clavier, les navigateurs dessinent un contour de focus autour ; ne supprime jamais ce contour sans le remplacer par quelque chose de bien visible.