Insérer un lien vers une autre page
La balise <a> transforme n’importe quel contenu en lien cliquable. Son fonctionnement est simple : tout ce qui se trouve entre la balise ouvrante <a> et la balise fermante <a> devient cliquable qu’il s’agisse d’un mot, d’une phrase, d’un titre ou d’une image.
!-- La balise <a> entoure le contenu qui deviendra cliquable -->
<a href="page.html">Ce texte est cliquable</a>
<!-- Ça marche aussi autour d'une image -->
<a href="page.html"><img src="photo.jpg" alt="description"></a>
<!-- Ou autour d'un titre -->
<a href="page.html"><h2>Ce titre est cliquable</h2></a>
Un lien qui s’ouvre dans un nouvel onglet
Quand vous utilisez target="_blank, ajoutez toujours l’attribut rel="noopener noreferrer". Cela empêche la page ouverte d’accéder à votre page d’origine (faille de sécurité connue) et préserve la vie privée de vos utilisateurs.
<a href="https://www.site.fr" target="_blank" rel="noopener noreferrer">
Un lien sécurisé dans un nouvel onglet
</a>Insérer un lien vers une adresse mail
<!-- Code pour créer un lien vers une adresse email -->
<a href="mailto: contact@mon-site.fr">Je suis un lien vers un mail</a>
<!-- Code pour créer un lien vers une adresse email + Objet déjà pré-rempli -->
<a href="mailto:contact@mon-site.fr?subject=Demande%20d'info">Je suis un lien vers un mail</a>
<!-- Code pour créer un lien vers une adresse email + Objet déjà pré-rempli + qqs lignes dans le corps du mail-->
<a href="mailto: contact@mon-site.fr?subject=Demande d'info&body=Bonjour, j'aime beaucoup ce que vous faites.">Je suis un lien vers un mail</a>
Lien vers un numéro de téléphone
<!-- Ce lien déclenche un appel téléphonique -->
<a href="tel:+33612345678">Appelez-nous</a>Naviguer à l’intérieur d’une page : les ancres
Une ancre permet de créer un lien vers un endroit précis de la même page. Le principe est simple : on attribue un identifiant (id) à l’élément cible, puis on crée un lien qui pointe vers cet identifiant grâce au symbole #.
Revenir en haut de page
L’usage le plus courant des ancres est le lien “retour en haut”. Il suffit d’attribuer un id à un élément situé en haut de votre page, puis de placer un lien vers cet identifiant plus bas dans la page.
<!-- En haut de ma page, j'identifie mon header -->
<header id="top">
<h1>Mon super site</h1>
</header>
<!-- Plus bas dans la page, je crée un lien qui ramène vers le haut -->
<a href="#top">↑ Retour en haut de page</a>Pointer vers une autre zone de la page
Sur une page longue (une FAQ, des témoignages, des conditions générales) les ancres peuvent jouer le rôle de sommaire cliquable. Chaque lien du sommaire pointe vers la section correspondante grâce à son id.
<!-- Mon sommaire, en haut de page -->
<nav>
<h2>Sommaire</h2>
<a href="#presentation">Présentation</a>
<a href="#temoignages">Témoignages</a>
<a href="#contact">Contact</a>
</nav>
<!-- Plus bas, mes sections avec leurs identifiants -->
<section id="presentation">
<h2>Présentation</h2>
<p>Bienvenue sur notre site...</p>
</section>
<section id="temoignages">
<h2>Témoignages</h2>
<p>Nos clients témoignent...</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Retrouvez-nous au...</p>
</section>Vous pouvez également pointer vers l’ancre d’une autre page de votre site.
<a href="equipe.html#temoignages">Voir les témoignages</a>Accessibilité & bonnes pratiques
Accessibilité et bonnes pratiques pour les liens
Un lien bien rédigé profite à tout le monde : aux utilisateurs de lecteurs d’écran, aux personnes naviguant au clavier et à vos visiteurs qui parcourent la page rapidement.
Rédiger des intitulés explicites
Les lecteurs d’écran peuvent lister l’ensemble des liens d’une page, hors contexte. Si tous vos liens s’appellent “cliquez ici” ou “en savoir plus”, cette liste devient inutilisable.
<!-- ❌ À éviter : le lien n'a aucun sens sorti de son contexte -->
<p>Pour découvrir nos formations, <a href="formations.html">cliquez ici</a>.</p>
<!-- ✅ À privilégier : l'intitulé du lien se suffit à lui-même -->
<p>Découvrez <a href="formations.html">notre catalogue de formations</a>.</p>Signaler la nature du lien
Quand un lien ouvre un fichier, un mail ou un nouvel onglet, le visiteur doit pouvoir l’anticiper. Indiquez-le dans l’intitulé ou via l’attribut title.
<!-- Un lien vers un PDF : j'indique le format et le poids -->
<a href="rapport.pdf" download title="fichier pdf, 2,4 Mo">Rapport annuel (PDF, 2,4 Mo)</a>
<!-- Un lien externe qui s'ouvre dans un nouvel onglet -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer" title="SOuvre un nouvel onglet">
Documentation MDN (nouvel onglet)
</a>Distinguer visuellement les liens
Par défaut, les navigateurs affichent les liens en bleu souligné. Vous pouvez personnaliser cette apparence en CSS, mais veillez à toujours maintenir un contraste suffisant et un indicateur visuel clair (soulignement, couleur distincte, icône) pour que vos liens restent identifiables.
Ressources & références
- MDN, l'élément <a>Article
- MDN, l'élément <nav>Article
- RGAA (Référentiel Général d'Amélioration de l'Accessibilité)Article
- AcceDe Web : fiches pratiques d'accessibilitéArticle
- WebAim : guide en anglais sur l'accessibilité des liensArticle
- WebAim : Contrast Checker pour vérifier que la couleur de vos liens offre un contraste suffisantArticle
- WAVE (Web Accessibility Evaluation Tool) : extension navigateur pour auditer l'accessibilité d'une page, y compris la qualité des intitulés de liensOutil
- Can I use : pour vérifier la compatibilité navigateur d'un attribut comme downloadOutil
- Opquast : 240 règles de qualité WebArticle
- Générateur de faux texteOutil