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 et balises — Cours HTML | SovranCode

Contenu du coursHTML — Éléments et balises · 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 47 min

HTML — Éléments et balises

Les éléments HTML indiquent le rôle du contenu. La plupart encadrent ce contenu entre deux balises ; les éléments vides, comme img et meta, n’en contiennent pas.

Les éléments HTML décrivent le rôle du contenu. La plupart associent une balise ouvrante, du contenu et une balise fermante. Les éléments vides représentent notamment une valeur ou une ressource externe, sans contenir d’autres éléments ni de texte. Une imbrication correcte transforme les lignes du fichier en une arborescence claire et fiable.

Lire les éléments du parent vers les enfants

Repérez d’abord l’élément parent et son rôle, puis examinez ses enfants. Les éléments imbriqués se ferment dans l’ordre inverse de leur ouverture : le dernier ouvert est le premier fermé. Si l’imbrication est incorrecte, le navigateur peut la corriger d’une façon différente de celle que vous aviez prévue.

<article lang="fr">
  <header>
    <h1>Concevoir une interface apaisante</h1>
    <p>Publié le <time datetime="2026-08-26">26 août</time></p>
  </header>
  <p>Une structure claire facilite la navigation dans le contenu.</p>
</article>

Choisissez chaque élément selon son rôle.
Indentez les enfants à l’intérieur de leur parent.
Fermez les éléments imbriqués dans l’ordre inverse de leur ouverture.

<main lang="fr">                 <!-- parent -->
  <h1>Notes de cours</h1> <!-- enfant ; frère de section -->
  <section>             <!-- enfant -->
    <h2>Les éléments</h2>   <!-- petit-enfant -->
    <p>La structure forme une arborescence.</p>
  </section>
</main>

<!-- Cet identifiant de titre est utilisé dans une URL publiée ; ne le renommez pas sans redirection. -->
<h2 id="form-validation">Validation de formulaire</h2>

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

Repérer les relations entre parents, enfants et éléments frères
Reconnaître les imbrications que HTML n’autorise pas
Comparer la structure prévue au DOM corrigé par le navigateur

L’imbrication ne se résume pas aux balises fermantes

Des balises peuvent être bien appariées tout en formant une imbrication invalide. Un paragraphe accepte du contenu textuel, notamment de l’emphase et des liens, mais pas une section entière. Les éléments interactifs imposent aussi des contraintes : placer un bouton dans un lien crée des actions concurrentes et un balisage invalide. Apprenez ce qu’un élément peut contenir, au-delà de la forme de sa balise fermante.

Les termes historiques « bloc » et « en ligne » décrivent des comportements d’affichage courants, que le CSS peut modifier. Ils ne suffisent pas à déterminer si une imbrication HTML est valide. Un lien peut entourer certaines structures plus grandes dans les contextes autorisés, mais il ne peut toujours pas contenir un autre lien. En cas de doute, consultez le modèle de contenu de l’élément : il précise ce qu’il peut contenir.

Le navigateur peut modifier l’arborescence prévue

Si le navigateur rencontre une section dans un paragraphe, il peut fermer le paragraphe avant de commencer la section. L’indentation ne change pas cette règle. Les sélecteurs CSS et les technologies d’assistance utilisent alors le DOM obtenu, pas l’arborescence que vous imaginiez. Un espacement inattendu peut donc révéler un problème de structure plutôt qu’un simple problème de marge.

Les éléments vides comme img, input et br ne peuvent pas avoir de contenu enfant. En HTML, une barre oblique finale ne rend pas un élément ordinaire autofermant. Écrivez les balises fermantes des conteneurs et inspectez le DOM lorsqu’un élément semble englober le contenu qui le suit.

VOTRE ESPACE DE PRATIQUE

Suivre l’arborescence d’une fiche de lecture

Repérez les relations entre les éléments avant d’exécuter le code.

Ouvrir dans un nouvel onglet

Code

<article lang="fr">
  <h1>Lire l’arborescence du document</h1>
  <section>
    <h2>L’idée du jour</h2>
    <p>Un élément peut contenir du texte <em>porteur de sens</em>.</p>
    <p>Ces paragraphes sont des éléments frères.</p>
  </section>
  <footer><p>Une fiche pour les personnes qui débutent en HTML.</p></footer>
</article>

<article lang="fr">
  <h1>Lire l’arborescence du document</h1>
  <section>
    <h2>L’idée du jour</h2>
    <p>Un élément peut contenir du texte <em>porteur de sens</em>.</p>
    <p>Ces paragraphes sont des éléments frères.</p>
  </section>
  <footer><p>Une fiche pour les personnes qui débutent en HTML.</p></footer>
</article>

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

section et footer ont le même parent, article ; aucun des deux ne se trouve à l’intérieur de l’autre.
em est un enfant du premier paragraphe ; le titre est un élément frère de ce paragraphe.
Modifier seulement l’indentation ne change pas ces relations. C’est le balisage interprété par le navigateur qui définit l’arborescence.

À VOUS DE CORRIGER

Un paragraphe fermé plus tôt que prévu

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.

<p>Avant
  <section><h2>Détails</h2></section>
Après</p>

Afficher la correction et son explication

<p>Avant</p>
<section><h2>Détails</h2><p>Après</p></section>

Une section ne peut pas être l’enfant d’un paragraphe. Placez l’introduction dans un paragraphe distinct et les détails dans la section. Examinez la version incorrecte dans l’inspecteur d’éléments pour observer la correction du navigateur.

À VOUS DE CRÉER

Dessiner, construire et vérifier l’arbre d’une page

Créez une fiche de lecture avec deux sections et un pied de page, puis expliquez l’imbrication à voix haute.

Votre plan de réalisation

Dessinez l’arborescence des éléments avant d’écrire le code.
Construisez-la en écrivant les balises fermantes des conteneurs.
Ajoutez une mise en emphase dans un paragraphe et une liste à l’extérieur de ce paragraphe.
Reproduisez l’exemple du paragraphe mal imbriqué, inspectez le DOM, puis rétablissez l’arborescence prévue.

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.

La structure affichée dans l’inspecteur correspond à votre dessin.
Aucune section ni liste n’est imbriquée dans un paragraphe.
Chaque élément interactif a une seule action, clairement identifiable.

Pour aller plus loin : Cherchez pourquoi <div /> ne ferme pas un div dans un document HTML.

Savez-vous expliquer votre choix ?

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

Passer display à inline peut-il rendre une imbrication invalide correcte ?

Non. La propriété CSS display change l’affichage, pas les enfants autorisés ni le rôle sémantique de l’élément HTML.

Pourquoi inspecter le DOM plutôt que se fier uniquement à l’indentation ?

L’indentation est une convention de lecture. Les règles d’analyse du navigateur déterminent l’arborescence réelle utilisée pour les styles et les comportements.

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 et balises

Lire les éléments du parent vers les enfants

Comprendre l’arborescence du document

Les commentaires HTML

Les erreurs à éviter

Mise en pratique guidée

À retenir

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

L’imbrication ne se résume pas aux balises fermantes

Le navigateur peut modifier l’arborescence prévue

Suivre l’arborescence d’une fiche de lecture

Code

Résultat

Pourquoi cet exemple fonctionne

Un paragraphe fermé plus tôt que prévu

Dessiner, construire et vérifier l’arbre d’une page

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Construire un article avec des éléments imbriqués

Code

Résultat

Comparer les éléments conteneurs et les éléments vides

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