Maîtrisez les liens et ancres HTML. Apprenez à créer une navigation web efficace avec exemples pratiques, attributs avancés, accessibilité et meilleures pratiques SEO.
L'élément <a> (anchor/ancre) est l'un des éléments les plus importants en HTML. Il définit un hyperlien qui peut pointer vers une autre page web, un fichier, une adresse email, un emplacement dans la même page, ou toute URL valide.
<a href="destination">Texte du lien</a>
<p>Visitez notre <a href="https://www.exemple.com">site web officiel</a> pour plus d'informations.</p>
<p>Vous pouvez aussi nous <a href="mailto:contact@exemple.com">envoyer un email</a> directement.</p>
<p>Pour un support immédiat, <a href="tel:+33123456789">appelez-nous</a> au téléphone.</p>
Les liens externes pointent vers des pages web sur d'autres domaines :
<!-- Liens vers des sites web externes -->
<a href="https://www.google.com">Google</a>
<a href="https://www.github.com">GitHub</a>
<a href="https://developer.mozilla.org">MDN Web Docs</a>
<!-- Liens avec protocole spécifique -->
<a href="https://www.exemple.com">Lien sécurisé (HTTPS)</a>
<a href="http://www.exemple.com">Lien non sécurisé (HTTP)</a>
<!-- Liens vers des sous-domaines -->
<a href="https://blog.exemple.com">Blog de l'entreprise</a>
<a href="https://boutique.exemple.com">Boutique en ligne</a>
Les liens internes pointent vers des pages du même site web :
<!-- Liens relatifs vers des pages dans le même répertoire -->
<a href="a-propos.html">À propos de nous</a>
<a href="contact.html">Contact</a>
<a href="services.html">Nos services</a>
<!-- Liens vers des sous-répertoires -->
<a href="blog/article-1.html">Premier article du blog</a>
<a href="produits/categorie-a.html">Catégorie A</a>
<!-- Liens vers le répertoire parent -->
<a href="../index.html">Retour à l'accueil</a>
<a href="../../ressources/documents.html">Documents</a>
<!-- Liens absolus internes -->
<a href="/accueil">Page d'accueil</a>
<a href="/produits/tous">Tous les produits</a>
Les liens d'ancre permettent de naviguer vers des sections spécifiques de la même page :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Navigation Interne</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#developpement">Développement</a></li>
<li><a href="#conclusion">Conclusion</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduction">
<h2>Introduction</h2>
<p>Contenu de l'introduction...</p>
<p><a href="#developpement">Aller au développement</a></p>
</section>
<section id="developpement">
<h2>Développement</h2>
<p>Contenu du développement...</p>
<p><a href="#conclusion">Passer à la conclusion</a></p>
</section>
<section id="conclusion">
<h2>Conclusion</h2>
<p>Contenu de la conclusion...</p>
<p><a href="#introduction">Retour au début</a></p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Informations de contact...</p>
</section>
</main>
<!-- Lien pour remonter en haut -->
<a href="#" class="retour-haut">↑ Retour en haut</a>
</body>
</html>
<!-- Liens email -->
<a href="mailto:contact@exemple.com">Envoyer un email</a>
<a href="mailto:support@exemple.com?subject=Demande&body=Bonjour, j'ai une question...">
Email avec sujet et corps prédéfinis
</a>
<!-- Liens téléphone -->
<a href="tel:+33123456789">Appeler : +33 1 23 45 67 89</a>
<a href="tel:+1-555-123-4567">Appeler : +1 (555) 123-4567</a>
<!-- Liens SMS -->
<a href="sms:+33123456789">Envoyer SMS</a>
<a href="sms:+33123456789?body=Bonjour, je suis intéressé par votre service">
SMS avec message prédéfini
</a>
<!-- Liens WhatsApp -->
<a href="https://wa.me/33123456789">Contacter par WhatsApp</a>
<a href="https://wa.me/33123456789?text=Bonjour, je suis intéressé par votre produit">
WhatsApp avec message
</a>
<!-- Liens de téléchargement de base -->
<a href="document.pdf" download>Télécharger PDF</a>
<a href="image.jpg" download="mon-image.jpg">Télécharger image</a>
<!-- Liens vers différents types de fichiers -->
<a href="presentation.pptx" download>Télécharger présentation</a>
<a href="feuille-calcul.xlsx" download>Télécharger Excel</a>
<a href="archive.zip" download>Télécharger archive compressée</a>
<!-- Liens avec informations supplémentaires -->
<p>
<a href="manuel-utilisateur.pdf" download="manuel-v2.pdf">
Télécharger Manuel Utilisateur
</a>
<small>(PDF, 2,5 MB)</small>
</p>
<a>hrefL'attribut href spécifie la destination du lien :
<!-- URLs complètes -->
<a href="https://www.exemple.com/page">Lien externe</a>
<!-- URLs relatives -->
<a href="page.html">Page locale</a>
<a href="../repertoire/page.html">Page dans répertoire parent</a>
<!-- Ancres -->
<a href="#section1">Aller à la section 1</a>
<!-- Protocoles spéciaux -->
<a href="mailto:email@exemple.com">Email</a>
<a href="tel:+123456789">Téléphone</a>
<a href="ftp://ftp.exemple.com/fichier.zip">FTP</a>
<!-- JavaScript (non recommandé) -->
<a href="javascript:void(0)" onclick="maFonction()">Exécuter fonction</a>
<!-- Lien vide (placeholder) -->
<a href="#">Lien temporaire</a>
targetL'attribut target spécifie où ouvrir le lien :
<!-- Ouvrir dans la même fenêtre/onglet (par défaut) -->
<a href="page.html" target="_self">Même fenêtre</a>
<!-- Ouvrir dans nouvelle fenêtre/onglet -->
<a href="https://www.exemple.com" target="_blank">Nouvelle fenêtre</a>
<!-- Ouvrir dans fenêtre parent (pour frames) -->
<a href="page.html" target="_parent">Fenêtre parent</a>
<!-- Ouvrir dans fenêtre supérieure (pour frames imbriquées) -->
<a href="page.html" target="_top">Fenêtre supérieure</a>
<!-- Ouvrir dans fenêtre/frame spécifique -->
<a href="page.html" target="ma-frame">Frame spécifique</a>
relL'attribut rel spécifie la relation entre la page actuelle et la destination du lien :
<!-- Pour liens externes (sécurité) -->
<a href="https://www.exemple.com" target="_blank" rel="noopener noreferrer">
Lien externe sécurisé
</a>
<!-- Pour liens sponsorisés -->
<a href="https://www.sponsor.com" rel="sponsored">Lien sponsorisé</a>
<!-- Pour liens non suivis par moteurs de recherche -->
<a href="https://www.exemple.com" rel="nofollow">Lien nofollow</a>
<!-- Pour liens d'auteur -->
<a href="https://www.auteur.com" rel="author">Profil de l'auteur</a>
<!-- Pour liens de licence -->
<a href="https://creativecommons.org/licenses/by/4.0/" rel="license">
Licence Creative Commons
</a>
<!-- Pour liens d'aide -->
<a href="aide.html" rel="help">Page d'aide</a>
<!-- Pour liens de navigation -->
<a href="page-precedente.html" rel="prev">Page précédente</a>
<a href="page-suivante.html" rel="next">Page suivante</a>
downloadL'attribut download indique que le lien doit télécharger la ressource :
<!-- Téléchargement avec nom original -->
<a href="document.pdf" download>Télécharger PDF</a>
<!-- Téléchargement avec nom personnalisé -->
<a href="rapport-2025.pdf" download="rapport-annuel.pdf">
Télécharger Rapport Annuel
</a>
<!-- Téléchargement d'image -->
<a href="image-haute-resolution.jpg" download="ma-photo.jpg">
Télécharger image
</a>
<!-- Titre descriptif (tooltip) -->
<a href="https://www.exemple.com" title="Visiter le site web officiel d'Exemple">
Site officiel
</a>
<!-- Étiquette ARIA pour lecteurs d'écran -->
<a href="document.pdf" aria-label="Télécharger le manuel utilisateur au format PDF">
Télécharger manuel
</a>
<!-- Description supplémentaire -->
<a href="video.mp4" aria-describedby="description-video">Voir vidéo</a>
<div id="description-video">Tutoriel vidéo de 10 minutes sur HTML</div>
<!-- Indiquer la langue de destination -->
<a href="https://www.example.com" hreflang="en">Version anglaise</a>
<a href="https://www.exemple.fr" hreflang="fr">Version française</a>
<article>
<h1>L'Importance du HTML Sémantique</h1>
<p>
Le <a href="https://developer.mozilla.org/fr/docs/Web/HTML" target="_blank" rel="noopener">
HTML sémantique</a> est fondamental pour créer des pages web accessibles.
Selon les <a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener">
directives WCAG 2.1</a>, l'utilisation correcte d'éléments sémantiques améliore
significativement l'expérience des utilisateurs handicapés.
</p>
<p>
Pour en apprendre plus sur l'accessibilité web, nous recommandons de consulter
<a href="/guide-accessibilite">notre guide complet d'accessibilité</a>
ou de visiter le <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
site officiel de WAI</a>.
</p>
</article>
<section>
<h2>Ressources Utiles pour Développeurs</h2>
<h3>Documentation Officielle</h3>
<ul>
<li>
<a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener">
MDN Web Docs
</a> - Documentation complète des technologies web
</li>
<li>
<a href="https://www.w3.org/standards/" target="_blank" rel="noopener">
Standards W3C
</a> - Standards web officiels
</li>
<li>
<a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener">
HTML Living Standard
</a> - Spécification HTML actuelle
</li>
</ul>
<h3>Outils de Développement</h3>
<ul>
<li>
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">
Visual Studio Code
</a> - Éditeur de code gratuit
</li>
<li>
<a href="https://validator.w3.org/" target="_blank" rel="noopener">
Validateur de Balisage W3C
</a> - Validateur HTML officiel
</li>
<li>
<a href="https://wave.webaim.org/" target="_blank" rel="noopener">
Évaluateur d'Accessibilité Web WAVE
</a> - Évaluateur d'accessibilité
</li>
</ul>
</section>
<table>
<caption>Ressources d'Apprentissage Web</caption>
<thead>
<tr>
<th>Ressource</th>
<th>Type</th>
<th>Niveau</th>
<th>Lien</th>
</tr>
</thead>
<tbody>
<tr>
<td>MDN Web Docs</td>
<td>Documentation</td>
<td>Tous</td>
<td>
<a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener">
Visiter le site
</a>
</td>
</tr>
<tr>
<td>freeCodeCamp</td>
<td>Cours interactif</td>
<td>Débutant</td>
<td>
<a href="https://www.freecodecamp.org/" target="_blank" rel="noopener">
Commencer le cours
</a>
</td>
</tr>
<tr>
<td>CSS-Tricks</td>
<td>Blog/Tutoriels</td>
<td>Intermédiaire</td>
<td>
<a href="https://css-tricks.com/" target="_blank" rel="noopener">
Explorer les articles
</a>
</td>
</tr>
</tbody>
</table>
<!-- ❌ Incorrect : Liens non descriptifs -->
<p>Pour plus d'informations, <a href="info.html">cliquez ici</a>.</p>
<p>Téléchargez le fichier <a href="document.pdf">ici</a>.</p>
<p><a href="contact.html">Plus</a></p>
<!-- ✅ Correct : Liens descriptifs -->
<p>Consultez <a href="info.html">des informations détaillées sur nos services</a>.</p>
<p>Téléchargez le <a href="document.pdf">manuel utilisateur au format PDF</a>.</p>
<p><a href="contact.html">Informations de contact et localisation</a></p>
<!-- Liens avec informations supplémentaires -->
<ul>
<li>
<a href="rapport-2025.pdf" aria-describedby="info-rapport">
Rapport Annuel 2025
</a>
<div id="info-rapport">PDF, 2,3 MB, 45 pages</div>
</li>
<li>
<a href="https://www.exemple.com" target="_blank"
aria-describedby="info-externe">
Site web officiel
</a>
<div id="info-externe">S'ouvre dans une nouvelle fenêtre</div>
</li>
</ul>
<!-- Liens avec icônes descriptives -->
<p>
<a href="mailto:contact@exemple.com">
<span aria-hidden="true">✉</span>
Envoyer email à contact@exemple.com
</a>
</p>
<p>
<a href="document.pdf">
<span aria-hidden="true">📄</span>
Télécharger document PDF
<span class="sr-only">(s'ouvrira dans une nouvelle fenêtre)</span>
</a>
</p>
<style>
/* Styles pour différents états de liens */
a:link { color: #0066cc; }
a:visited { color: #800080; }
a:hover, a:focus {
color: #004499;
text-decoration: underline;
outline: 2px solid #004499;
}
a:active { color: #ff0000; }
/* Indicateurs visuels pour types de liens */
a[href^="http"]:after {
content: " ↗";
font-size: 0.8em;
}
a[href^="mailto:"]:before {
content: "✉ ";
}
a[href^="tel:"]:before {
content: "📞 ";
}
a[download]:after {
content: " ⬇";
}
</style>
<p>
Visitez notre <a href="https://www.exemple.com">site web</a> ou
<a href="mailto:info@exemple.com">envoyez-nous un email</a>.
Vous pouvez aussi nous <a href="tel:+33123456789">appeler</a> ou
<a href="catalogue.pdf" download>télécharger notre catalogue</a>.
</p>
<!-- Structure de liens internes pour SEO -->
<article>
<h1>Guide Complet HTML</h1>
<p>
Ce guide couvre tous les aspects fondamentaux de HTML, depuis les
<a href="/html-basique">concepts de base HTML</a> jusqu'aux
<a href="/html-avance">techniques avancées</a>.
</p>
<h2>Contenu Connexe</h2>
<ul>
<li><a href="/fondamentaux-css">Fondamentaux CSS</a></li>
<li><a href="/javascript-debutants">JavaScript pour Débutants</a></li>
<li><a href="/developpement-web-responsive">Développement Web Responsive</a></li>
</ul>
<p>
Pour approfondir des sujets spécifiques, consultez nos articles sur
<a href="/html-semantique">HTML sémantique</a> et
<a href="/accessibilite-web">accessibilité web</a>.
</p>
</article>
<!-- ✅ Texte d'ancre descriptif et optimisé -->
<p>
Apprenez <a href="/tutoriel-html-complet">comment créer des pages web avec HTML</a>
de zéro avec notre tutoriel complet.
</p>
<p>
Découvrez les <a href="/meilleures-pratiques-css">meilleures pratiques CSS</a>
pour créer des designs web modernes et responsives.
</p>
<!-- ❌ Texte d'ancre générique -->
<p>
Pour apprendre HTML, <a href="/tutoriel-html-complet">cliquez ici</a>.
</p>
<p>
Plus d'informations sur CSS <a href="/meilleures-pratiques-css">sur ce lien</a>.
</p>
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Guide de Développement Web</h1>
<p>
Écrit par
<a href="/auteur/jean-dupont" itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Jean Dupont</span>
</a>
</p>
<p>
Publié dans
<a href="/categorie/developpement-web" itemprop="about">Développement Web</a>
</p>
<div itemprop="articleBody">
<p>
Pour plus de ressources, visitez notre
<a href="/ressources-developpement" itemprop="relatedLink">
centre de ressources de développement
</a>.
</p>
</div>
</article>
<!-- Liens qui fonctionnent avec et sans JavaScript -->
<a href="/rechercher?q=html" class="recherche-ajax" data-terme="html">
Rechercher "HTML"
</a>
<script>
document.querySelectorAll('.recherche-ajax').forEach(lien => {
lien.addEventListener('click', function(e) {
e.preventDefault();
// Effectuer recherche AJAX
effectuerRechercheAjax(this.dataset.terme);
});
});
</script>
<!-- Liens qui changent selon le contexte -->
<div class="produit" data-disponible="true">
<h3>Produit XYZ</h3>
<p class="prix">99,99€</p>
<!-- Ce lien s'affiche seulement si le produit est disponible -->
<a href="/acheter/produit-xyz" class="btn-acheter">
Acheter maintenant
</a>
<!-- Ce lien s'affiche si le produit n'est pas disponible -->
<a href="/notifier/produit-xyz" class="btn-notifier" style="display: none;">
Me notifier quand disponible
</a>
</div>
<!-- Liens qui nécessitent confirmation -->
<a href="/supprimer/document/123"
onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce document ?')">
Supprimer document
</a>
<!-- Version plus accessible avec JavaScript -->
<a href="/supprimer/document/123"
class="lien-confirmation"
data-message="Êtes-vous sûr de vouloir supprimer ce document ?">
Supprimer document
</a>
<script>
document.querySelectorAll('.lien-confirmation').forEach(lien => {
lien.addEventListener('click', function(e) {
if (!confirm(this.dataset.message)) {
e.preventDefault();
}
});
});
</script>
<!-- ❌ Erreurs courantes -->
<!-- 1. Liens vides ou sans destination -->
<a href="#">Lien sans destination</a>
<a>Lien sans href</a>
<!-- 2. Texte de lien non descriptif -->
<a href="document.pdf">Cliquez ici</a>
<a href="info.html">Plus d'informations</a>
<!-- 3. Liens externes sans sécurité -->
<a href="https://site-externe.com" target="_blank">Site externe</a>
<!-- 4. Multiples liens avec le même texte -->
<a href="produit1.html">Voir plus</a>
<a href="produit2.html">Voir plus</a>
<a href="produit3.html">Voir plus</a>
<!-- 5. Liens qui ne ressemblent pas à des liens -->
<a href="page.html" style="color: black; text-decoration: none;">
Texte qui semble normal
</a>