HTML Academy · Leçon

L’élément `section` ou `div`

Sachez quand utiliser `section` plutôt qu’un simple `div`.

L’élément `section` ou `div` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

L’élément section

L’élément <section> regroupe du contenu associé au sein d’une section thématique :

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section ou div

La question essentielle est la suivante : ce groupe possède-t-il un thème ou un objectif auquel vous pourriez donner un nom ?

<section> — oui ; il représente un regroupement thématique et devrait avoir un titre
<div> — non ; c’est simplement un conteneur de mise en forme ou de script

section nécessite un titre

Chaque <section> devrait avoir un titre (<h2>-<h6>) :

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Quand utiliser section

Utilisez <section> pour :

Les chapitres d’un document
Les onglets ou les étapes d’un assistant
Les parties d’un long article (Introduction, Méthodes, Résultats)
Les sections promotionnelles d’une page d’accueil (Fonctionnalités, Tarifs, Témoignages)

Quand utiliser div

Utilisez <div> lorsque vous avez seulement besoin d’un conteneur pour CSS ou JavaScript, sans signification sémantique :

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section dans un long article

Utilisez des sections pour créer des chapitres dans un article :

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Sections de la page d’accueil

Une page d’accueil structurée avec des sections :

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section crée un contexte de titre

Les sections créent de nouveaux contextes de titre dans l’algorithme de plan du document HTML5 :

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby pour les sections

Associez une section à son titre pour les lecteurs d’écran :

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Organigramme de décision

Quel élément conteneur utiliser ?

Navigation principale ? → <nav>
Contenu principal de la page ? → <main>
Contenu autonome ? → <article>
Regroupement thématique avec un titre ? → <section>
Barre latérale ou contenu associé ? → <aside>
Simple conteneur de mise en forme ? → <div>

section sans titre : utilisez div

Si vous ne pouvez pas donner de titre à une section, utilisez plutôt div :

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Vérification rapide

Quand devriez-vous préférer div à section ?

Récapitulatif : section ou div

Principes essentiels de section et div :

<section> — groupe thématique qui devrait avoir un titre
<div> — conteneur sémantiquement neutre pour la mise en forme ou les scripts
section crée une région nommée de repérage pour la navigation des lecteurs d’écran
Ajoutez aria-labelledby pour relier la section à son titre
En cas de doute, utilisez div ; vous pourrez toujours le remplacer plus tard

Questions Fréquemment Posées

La leçon « L’élément `section` ou `div` » est-elle gratuite ?

Oui — le texte complet de « L’élément `section` ou `div` » 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 `section` ou `div` » ?

Sachez quand utiliser `section` plutôt qu’un simple `div`. 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 3 sur 4.

Combien de temps prend la leçon « L’élément `section` ou `div` » ?

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

← Retour à HTML Academy