Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

HTML — Liens hypertextes — Cours HTML | SovranCode

Contenu du coursHTML — Liens hypertextes · 26 leçons

Les bases de HTML

HTML — Introduction HTML — Éditeurs de code HTML — Structure d’un document HTML — En-tête et métadonnées HTML — Éléments et balises HTML — Attributs

Organiser le texte et le contenu

HTML — Titres h1 à h6 HTML — Paragraphes HTML — Mise en forme du texte

Ajouter des liens et des médias

HTML — Liens hypertextes HTML — Images HTML — Images adaptatives HTML — Audio et vidéo HTML — Iframes et intégration de pages

Présenter des listes et des tableaux

HTML — Listes HTML — Tableaux

Créer des formulaires

HTML — Formulaires HTML — Types de champs de saisie HTML — Listes de choix et zones de texte HTML — Boutons HTML — Validation des formulaires

Donner du sens à vos pages

HTML — Éléments sémantiques

Accessibilité et bonnes pratiques

HTML — Accessibilité HTML — Adaptation aux écrans HTML — Conventions d’écriture

Références et mise en pratique

HTML — Référence des éléments

HTML 49 min

HTML — Liens hypertextes

Les liens HTML relient les pages et les ressources grâce à l’élément a. Ils peuvent mener vers une page, un fichier, une adresse e-mail, une section du document ou un autre site.

Les liens relient les ressources entre elles pour former le Web. Un élément a a besoin d’une destination utile et d’un texte qui indique où il mène. Les liens servent à naviguer ; les boutons déclenchent des actions. Respecter cette distinction rend le clavier, les menus contextuels, l’historique et les technologies d’assistance plus prévisibles.

Choisir le type d’URL adapté

Une URL absolue comprend un protocole et un domaine. Un chemin relatif à la racine part de la racine du site. Un chemin relatif au document est interprété à partir du fichier courant. Un lien avec un fragment vise un id unique dans la page ; les liens mailto et tel demandent l’ouverture d’une application externe.

<nav aria-label="Liens du cours">
  <a href="/fr/courses/html">Cours HTML</a>
  <a href="./forms.html">Leçon sur les formulaires</a>
  <a href="#practice">Aller à la pratique</a>
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">Documentation HTML sur MDN</a>
</nav>

Rédigez un texte de lien compréhensible à lui seul.
Choisissez délibérément un type de chemin adapté et stable.
Faites pointer les fragments vers des identifiants uniques.

<p>
  <a href="/guides/html-checklist.pdf" download>
    Télécharger la liste de vérification HTML (PDF, 240 Ko)
  </a>
</p>
<p>
  <a href="https://validator.w3.org/" target="_blank" rel="noopener">
    Ouvrir le validateur W3C dans un nouvel onglet
  </a>
</p>

APPROFONDIR ET PRATIQUER · ENVIRON 25 MIN

Comprenez. Créez. Expliquez.

Explorez l’exemple, essayez de corriger le code avant de consulter la solution, puis créez votre propre version.

Les objectifs de cet atelier

Comprendre comment une URL est interprétée
Distinguer la navigation des actions
Rédiger des liens compréhensibles hors contexte

Une URL dépend de son point de départ

Depuis /guides/start.html, next.html mène à /guides/next.html, ../index.html remonte d’un dossier et /index.html part de la racine de l’origine. Un fragment comme #equipment désigne une cible dans le document courant. Un lien peut donc sembler correct dans le code source et mener au mauvais endroit après le déplacement d’une page.

Utilisez un lien pour mener l’utilisateur vers une destination et un bouton pour agir dans l’interface courante. Une ancre sans href n’équivaut pas à un lien fonctionnel. Un bouton qui change de page peut aussi empêcher des usages habituels des liens, comme ouvrir un autre onglet ou copier l’adresse de destination.

Le texte et le comportement des liens font partie de l’interface

Répéter « cliquez ici » oblige les lecteurs à retrouver le contexte. Préférez un intitulé qui nomme la destination, comme « Liste du matériel pour l’atelier ». Lorsqu’un fichier s’ouvre ou se télécharge, précisez les informations utiles, notamment son format. N’annoncez pas une taille que vous n’avez pas mesurée et ne pointez pas vers une ressource inexistante.

Un nouvel onglet peut surprendre : utilisez-le de façon réfléchie et annoncez-le lorsque c’est utile. rel='noopener' empêche explicitement la page ouverte d’accéder à la relation avec la page d’origine. L’attribut download formule une demande, sans garantir le résultat dans tous les cas : les restrictions d’origine et les en-têtes de réponse peuvent intervenir. Testez les véritables fichiers sur le site concerné.

VOTRE ESPACE DE PRATIQUE

Un guide d’une page avec une navigation fonctionnelle

Cet exemple possède de véritables cibles de fragments : chaque lien fonctionne dans l’aperçu.

Ouvrir dans un nouvel onglet

Code

<nav aria-label="Guide de l’atelier">
  <a href="#equipment">Liste du matériel</a>
  <a href="#schedule">Programme de l’atelier</a>
</nav>
<main lang="fr">
  <h1>Préparer l’atelier</h1>
  <section id="equipment"><h2>Liste du matériel</h2><p>Apportez un carnet.</p></section>
  <section id="schedule"><h2>Programme de l’atelier</h2><p>Arrivez à 10 h.</p></section>
</main>

<nav aria-label="Guide de l’atelier">
  <a href="#equipment">Liste du matériel</a>
  <a href="#schedule">Programme de l’atelier</a>
</nav>
<main lang="fr">
  <h1>Préparer l’atelier</h1>
  <section id="equipment"><h2>Liste du matériel</h2><p>Apportez un carnet.</p></section>
  <section id="schedule"><h2>Programme de l’atelier</h2><p>Arrivez à 10 h.</p></section>
</main>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Nom de la version

Vous pouvez conserver cinq versions nommées par exemple. Restaurer une version remplace le code dans l’éditeur sans modifier la version enregistrée. Connectez-vous avant de modifier le code pour enregistrer votre travail sur votre compte. Les brouillons invités restent sur cet appareil.

Chargement du travail enregistré…

Pourquoi cet exemple fonctionne

Chaque fragment correspond exactement à un id unique.
Le nom de la navigation permet de distinguer ce groupe des autres zones de navigation.
Les liens nomment leur destination au lieu de décrire le geste de cliquer.

À VOUS DE CORRIGER

Un bouton imbriqué dans un lien

Repérez le problème et proposez une correction. Expliquez ce qu’elle améliore dans le document, même si les deux versions se ressemblent à l’écran.

<a href="#schedule"><button>Voir le programme</button></a>

Afficher la correction et son explication

<a href="#schedule">Consulter le programme de l’atelier</a>
<section id="schedule"><h2>Programme de l’atelier</h2></section>

Imbriquer des éléments interactifs crée des comportements concurrents. Une navigation demande une seule ancre avec href. Le CSS peut lui donner l’apparence d’un bouton sans y imbriquer un élément button.

À VOUS DE CRÉER

Vérifier toutes les destinations

Créez un guide avec des fragments locaux et des liens entre deux fichiers de votre dossier d’exercice.

Votre plan de réalisation

Ajoutez deux liens explicites avec des fragments et les cibles correspondantes.
Ajoutez un lien relatif vers une deuxième page et un lien de retour.
Testez la navigation avec Tab et Entrée.
Déplacez le second fichier dans un dossier, puis ajustez son chemin en tenant compte du nouvel emplacement.

Vérifiez votre travail

Cette grille vous aide à évaluer votre travail ; elle ne donne pas de note automatique. Enregistrez vos fichiers et vérifiez chaque critère avant de marquer la leçon comme terminée.

Toutes les destinations existent.
Le texte du lien identifie la cible sans avoir besoin du texte qui l’entoure.
Aucune ancre ne contient un autre élément interactif.

Pour aller plus loin : Comparez la copie de l’adresse d’un lien et son activation ; expliquez l’utilité de ces deux interactions.

Savez-vous expliquer votre choix ?

Répondez d’abord avec vos propres mots, puis comparez votre raisonnement.

href='#' constitue-t-il une destination de navigation aboutie ?

Il mène généralement au début du document courant, pas à une page manquante que vous auriez prévue. Utilisez une véritable destination ou ne présentez pas l’élément comme un lien fonctionnel.

Pourquoi tester un lien depuis la page qui le contient ?

Les URL relatives sont interprétées à partir de cette page. Ouvrir directement le fichier cible ne prouve pas que le lien entre les deux est correct.

Vos choix de confidentialité

Les bases de HTML

Organiser le texte et le contenu

Ajouter des liens et des médias

Présenter des listes et des tableaux

Créer des formulaires

Donner du sens à vos pages

Accessibilité et bonnes pratiques

Références et mise en pratique

HTML — Liens hypertextes

Choisir le type d’URL adapté

Prévoir les nouveaux onglets et les téléchargements

Les erreurs à éviter

Mise en pratique guidée

À retenir

Questions fréquentes

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

Une URL dépend de son point de départ

Le texte et le comportement des liens font partie de l’interface

Un guide d’une page avec une navigation fonctionnelle

Code

Résultat

Pourquoi cet exemple fonctionne

Un bouton imbriqué dans un lien

Vérifier toutes les destinations

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Construire une navigation utile

Code

Résultat

Annoncer les comportements particuliers

Code

Résultat

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris

Vérifiez vos acquis