L’élément anchor et l’attribut href
Créez des liens avec la balise anchor et l’attribut href.
L’élément anchor et l’attribut href est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce qu’un lien ?
L’élément <a> (ancre) crée un hyperlien — la brique fondamentale du Web.
- Les utilisateurs cliquent sur les liens pour naviguer entre les pages
- Les liens relient des documents, des ressources et des emplacements
- Sans liens, le Web serait un ensemble de pages isolées
L’attribut href
L’attribut href (référence hypertexte) indique la destination du lien :
<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>
<a href="../contact.html">Contact</a>
<!-- href = destination URL or path
Content between tags = clickable text -->
<!-- Without href, a is still valid but not a hyperlink -->Le texte du lien est important
Le texte entre les balises <a> (le texte du lien) doit décrire la destination :
<!-- Bad: uninformative -->
<a href="/docs/guide">Click here</a>
<a href="/docs/guide">Read more</a>
<!-- Good: descriptive -->
<a href="/docs/guide">Read the Getting Started Guide</a>
<!-- Screen readers list all links — "click here" is meaningless out of context -->Types de valeurs de href
href peut contenir différents types de valeurs :
<a href="https://example.com">External URL</a>
<a href="/page">Root-relative path</a>
<a href="page.html">Relative path</a>
<a href="#section">Fragment (same page)</a>
<a href="mailto:hi@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="javascript:void(0)">JS (avoid this)</a>Créer des liens vers une adresse e-mail et un numéro de téléphone
Des schémas d’URI spéciaux permettent de créer des liens vers une adresse e-mail et un numéro de téléphone :
<a href="mailto:support@example.com">Email Support</a>
<a href="mailto:support@example.com?subject=Hello&body=Hi%20there">
Email with Subject
</a>
<a href="tel:+15555551234">Call Us: (555) 555-1234</a>
<!-- Tapping tel: links on mobile opens the phone dialer -->L’attribut title sur les liens
Ajoutez une infobulle avec l’attribut title :
<a href="/glossary" title="View the full HTML glossary">Glossary</a>
<!-- title appears as a tooltip on hover
But: not accessible via keyboard or touch — never rely on title alone for critical info -->Mettre les liens en forme
Les navigateurs appliquent des styles par défaut aux liens, qu’il convient de conserver pour garantir l’accessibilité :
/* Default link states */
a:link { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover { color: red; }
a:focus { outline: 2px solid blue; } /* keyboard focus */
a:active { color: red; }
/* Never remove :focus outline — keyboard users need it */Liens actifs et liens actuels
Utilisez aria-current pour le lien de navigation actuel :
<nav>
<a href="/">Home</a>
<a href="/about" aria-current="page">About</a>
<a href="/contact">Contact</a>
</nav>
<!-- aria-current="page" tells screen readers this link is the current page -->
<!-- CSS: [aria-current="page"] { font-weight: bold; } -->Ancre sans href
Un élément <a> sans href est un lien factice — il n’est pas interactif :
<a>Not a link yet</a>
<!-- No href = no hyperlink, no default pointer cursor, not keyboard-focusable -->
<!-- If you need a clickable element without navigation, use button:
<button onclick="doSomething()">Click Me</button> -->Envelopper des éléments de niveau bloc
En HTML5, <a> peut envelopper des éléments de niveau bloc — ce qui rend des sections entières cliquables :
<a href="/products/widget">
<div class="card">
<h2>Widget Pro</h2>
<p>The best widget available.</p>
<img src="widget.jpg" alt="Widget Pro product image">
</div>
</a>
<!-- Valid in HTML5 (not in HTML4) -->
<!-- Ensure the link text is still descriptive for screen readers -->Focus du lien et accès au clavier
Les liens doivent être accessibles au clavier :
- Les utilisateurs parcourent les liens avec la touche Tab
- Ils activent les liens avec la touche Enter
- Ne supprimez jamais le contour de focus des liens
- L’ordre de tabulation doit suivre l’ordre de lecture
Vérification rapide
Qu’est-ce qui rend le texte d’un lien accessible aux utilisateurs de lecteurs d’écran ?
Récapitulatif : l’élément ancre
Concepts essentiels des liens :
<a href="url">crée un hyperlien- Le texte du lien doit décrire la destination
- Prend en charge les URL externes, les chemins relatifs, les fragments, mailto: et tel:
- HTML5 permet d’envelopper des éléments de niveau bloc dans
<a> - Ne supprimez jamais le contour de :focus
- Utilisez
aria-current="page"pour les éléments de navigation actuels
Questions Fréquemment Posées
La leçon « L’élément anchor et l’attribut href » est-elle gratuite ?
Oui — le texte complet de « L’élément anchor et l’attribut href » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « L’élément anchor et l’attribut href » ?
Créez des liens avec la balise anchor et l’attribut href. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « L’élément anchor et l’attribut href » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’élément anchor et l’attribut href
- URL absolues ou relatives
- Ouvrir des liens dans de nouveaux onglets et attribut download
- Créer des liens vers des sections avec les identifiants de fragment