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 — Éléments sémantiques — Cours HTML | SovranCode

Contenu du coursHTML — Éléments sémantiques · 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 58 min

HTML — Éléments sémantiques

Bien choisir ses balises, c’est rendre le rôle du contenu compréhensible : où se trouve la navigation, quel est le contenu principal, qu’est-ce qui forme un article ? Découvrez aussi quand div et span restent les bons choix.

Avec le HTML sémantique, on choisit une balise pour ce que son contenu représente. nav identifie la navigation, main le contenu principal, article un contenu autonome et section une partie consacrée à un sujet. header, aside et footer complètent cette organisation selon leur contexte. Lorsqu’aucun rôle particulier ne convient, div et span gardent toute leur utilité.

Donner des repères à la page

Une page classique comporte un en-tête de site, une navigation principale, une zone main et un pied de page. main accueille le contenu central propre à cette page : il ne doit y en avoir qu’un de visible. aside sert aux compléments de lecture ; sa place à droite ou à gauche dans la mise en page ne suffit pas à justifier son utilisation.

<header>
  <a href="/">SovranCode</a>
  <nav aria-label="Navigation principale">…</nav>
</header>
<main>
  <article>
    <h1>HTML sémantique</h1>
    <p>Choisissez les éléments selon le rôle du contenu.</p>
  </article>
  <aside aria-labelledby="related-title">
    <h2 id="related-title">Leçons complémentaires</h2>
  </aside>
</main>
<footer>© SovranCode</footer>

Gardez une seule zone main visible.
Donnez des noms distincts aux zones nav ou aside lorsqu’il y en a plusieurs.

<article>
  <header>
    <h1>Comment j’ai appris à créer des formulaires accessibles</h1>
    <p>Par Samira · <time datetime="2026-08-26">26 août</time></p>
  </header>
  <section>
    <h2>Commencer par le libellé</h2>
    <p>Je définis le libellé du champ avant de travailler son apparence.</p>
  </section>
</article>

APPROFONDIR ET PRATIQUER · ENVIRON 30 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

Choisir les repères selon le rôle du contenu
Choisir entre article, section et div
Prévoir un ordre de lecture cohérent avant la mise en page

Les repères situent le contenu ; les titres annoncent les sujets

La zone main désigne le contenu principal de la page. Une zone de navigation regroupe les liens importants pour se déplacer. Les titres annoncent les sujets abordés dans ces zones. Ces deux repérages se complètent : main ne remplace pas le titre de la page et un titre ne suffit pas à identifier sa navigation principale.

Pour les pages ordinaires de ce cours, gardez un seul main visible. Un header placé dans un article introduit cet article ; il ne représente pas pour autant la bannière du site. Le rôle d’un élément dépend donc aussi de son contexte. Regardez où il se trouve dans la structure : tous les header et footer ne créent pas le même repère d’accessibilité.

Tous les conteneurs n’ont pas besoin d’un rôle particulier

article convient à un contenu qui a du sens à lui seul, comme une actualité ou une note de cours complète. section rassemble une partie d’un document autour d’un sujet et gagne généralement à avoir un titre. Une div peut simplement réunir des éléments à mettre en forme. Ces conteneurs neutres sont utiles dès lors qu’on les emploie pour ce qu’ils sont.

aside accueille un complément au contenu environnant, pas tout ce que l’on place à droite. Si les consignes d’inscription sont essentielles à une page d’atelier, elles ne deviennent pas secondaires parce que la maquette les présente dans une colonne latérale. Construisez d’abord l’ordre de lecture ; CSS pourra ensuite organiser l’affichage.

VOTRE ESPACE DE PRATIQUE

Organiser une note de cours et ses lectures complémentaires

Distinguez la navigation du site, le texte principal et les ressources pour aller plus loin.

Ouvrir dans un nouvel onglet

Code

<header><p>Notes de l’atelier</p><nav aria-label="Navigation principale"><a href="#note">La note du jour</a></nav></header>
<main id="note">
  <article>
    <header><h1>Pourquoi les repères sont utiles</h1><p>Quelques observations pour mieux structurer ses pages.</p></header>
    <section><h2>Identifier le sujet principal</h2><p>La structure aide à se repérer.</p></section>
    <footer><p>Fin de la note.</p></footer>
  </article>
  <aside><h2>Pour aller plus loin</h2><p>Essayez de repérer les grandes zones d’une autre page.</p></aside>
</main>

<header><p>Notes de l’atelier</p><nav aria-label="Navigation principale"><a href="#note">La note du jour</a></nav></header>
<main id="note">
  <article>
    <header><h1>Pourquoi les repères sont utiles</h1><p>Quelques observations pour mieux structurer ses pages.</p></header>
    <section><h2>Identifier le sujet principal</h2><p>La structure aide à se repérer.</p></section>
    <footer><p>Fin de la note.</p></footer>
  </article>
  <aside><h2>Pour aller plus loin</h2><p>Essayez de repérer les grandes zones d’une autre page.</p></aside>
</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

Le header extérieur présente le site ; celui à l’intérieur de l’article présente uniquement l’article.
La section développe un sujet précis ; l’article, lui, reste compréhensible comme une note indépendante.
L’aside propose une lecture supplémentaire, plutôt qu’une étape indispensable reléguée dans une colonne latérale.

À VOUS DE CORRIGER

Une balise choisie d’après sa place à l’écran

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.

<aside><h1>S’inscrire à l’atelier</h1><p>L’inscription est obligatoire.</p></aside>

Afficher la correction et son explication

<main><h1>S’inscrire à l’atelier</h1><p>L’inscription est obligatoire.</p></main>

Si l’inscription est l’objectif principal de cette page, elle appartient à main. Le fait de la placer à droite dans une maquette n’en fait pas un contenu secondaire.

À VOUS DE CRÉER

Revoir une page composée uniquement de div

Créez un article d’atelier avec une navigation principale, deux sections, des ressources complémentaires et un pied de page.

Votre plan de réalisation

Décrivez en quelques mots le rôle de chaque partie du contenu.
Remplacez uniquement les conteneurs auxquels correspond un rôle sémantique précis.
Si la page contient plusieurs navigations, donnez à chacune un nom accessible distinct.
Lisez le document de haut en bas sans les styles de mise en page.

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.

Le contenu principal est facile à identifier.
Chaque section traite d’un sujet clairement annoncé.
Les consignes indispensables restent dans le fil de lecture principal.

Pour aller plus loin : Déplacez les ressources complémentaires avec CSS, sans modifier leur rôle dans le document.

Savez-vous expliquer votre choix ?

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

Une div est-elle forcément un mauvais choix ?

Non. Elle convient pour un regroupement neutre lorsqu’aucun élément sémantique plus précis ne correspond au besoin.

Multiplier les repères améliore-t-il forcément la navigation ?

Non. Trop de zones, ou des zones impossibles à distinguer, compliquent le repérage. Gardez des régions utiles et donnez-leur des noms clairs lorsque c’est nécessaire.

VOTRE ESPACE DE PRATIQUE

Construire une page avec des rôles bien définis

Ajoutez un aside de lectures complémentaires, avec son propre titre et un nom accessible associé.

Ouvrir dans un nouvel onglet

Code

<header>
  <strong>SovranCode</strong>
  <nav aria-label="Navigation principale"><a href="/courses">Cours</a> <a href="/exercises">Exercices</a></nav>
</header>
<main>
  <article>
    <h1>Structurer une page avec les bonnes balises</h1>
    <section><h2>Commencer par les repères</h2><p>Donnez un rôle clair à chaque zone.</p></section>
  </article>
</main>
<footer><p>Apprenez en créant.</p></footer>

<header>
  <strong>SovranCode</strong>
  <nav aria-label="Navigation principale"><a href="/courses">Cours</a> <a href="/exercises">Exercices</a></nav>
</header>
<main>
  <article>
    <h1>Structurer une page avec les bonnes balises</h1>
    <section><h2>Commencer par les repères</h2><p>Donnez un rôle clair à chaque zone.</p></section>
  </article>
</main>
<footer><p>Apprenez en créant.</p></footer>

Résultat

Nom de la version

Chargement du travail enregistré…

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 — Éléments sémantiques

Donner des repères à la page

Choisir entre article, section et div

Les erreurs à éviter

Mise en pratique guidée

À retenir

Questions fréquentes

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

Les repères situent le contenu ; les titres annoncent les sujets

Tous les conteneurs n’ont pas besoin d’un rôle particulier

Organiser une note de cours et ses lectures complémentaires

Code

Résultat

Pourquoi cet exemple fonctionne

Une balise choisie d’après sa place à l’écran

Revoir une page composée uniquement de div

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Construire une page avec des rôles bien définis

Code

Résultat

Choisir le bon rôle pour chaque regroupement

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