Chapitre 700 | Balises sémantiques essentielles HTML5

Pourquoi ne pas tout mettre dans des <div> ?

Depuis le chapitre 115, vous savez que <div> est un conteneur neutre : il ne porte aucun sens particulier, il sert juste à regrouper ou diviser du contenu. C’est très pratique, mais si on l’utilise pour absolument tout, la page perd en sens structurel.

HTML5 propose des balises dites sémantiques : elles ressemblent à des <div> (aucun style visuel par défaut), mais elles indiquent clairement le rôle du contenu qu’elles contiennent. Trois bénéfices concrets :

• SEO : les moteurs de recherche comprennent mieux la structure de la page.
• Accessibilité : les lecteurs d’écran annoncent ces zones (« navigation », « contenu principal »…), ce qui aide les utilisateurs à se repérer sans voir la mise en page.
• Lisibilité du code : un développeur qui reprend votre code comprend la structure en un coup d’œil, sans avoir à deviner ce que chaque div représente.

Attention à un malentendu fréquent : ces balises sémantiques ne remplacent pas <div> — elles s’y ajoutent. Dans la vraie vie, on mélange constamment les deux : les balises sémantiques marquent les grandes zones de sens de la page (« ceci est la navigation », « ceci est un article »), tandis que le <div> reste l’outil par défaut pour tout ce qui est purement visuel ou technique à l’intérieur de ces zones (un wrapper Flexbox, une carte, un conteneur qui centre du contenu). Vous verrez des <div> dans presque tous les exemples qui suivent, à l’intérieur des balises sémantiques.

<header> : l’en-tête d’une page ou d’une section

Contient l’introduction ou les éléments de navigation d’une page (ou d’une section). Contient souvent un logo, un titre, un menu.

<header>
  <div class="logo-wrapper">
    <img src="logo.png" alt="Logo">
    <h1>Mon Site</h1>
  </div>
</header>

Ici, le <div class="logo-wrapper"> n’a aucun sens sémantique propre — il sert juste à regrouper le logo et le titre pour pouvoir les styliser ensemble (par exemple les aligner avec Flexbox).

Attention : ne pas confondre avec <head> (déjà vu au chapitre 30), qui contient les métadonnées invisibles de la page.

<nav> : un bloc de navigation

Regroupe les liens de navigation principaux d’un site (menu, fil d’ariane, pagination). On y met généralement une liste de liens.

<nav>
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main> : le contenu principal

Contient le contenu unique et central de la page — ce pour quoi la page existe. Une page ne doit avoir qu’un seul <main>, et il ne doit pas contenir d’éléments répétés sur toutes les pages (comme le header ou le footer).

<main>
  <h1>Bienvenue sur mon blog</h1>
  <p>Voici mon dernier article...</p>
</main>

<section> : une section thématique

Regroupe un ensemble de contenus liés par un même thème, généralement introduit par un titre (h2, h3…). Une page peut contenir plusieurs <section>.

<section>
  <h2>Nos services</h2>

  <div class="service-card">
    <p>Description des services proposés...</p>
  </div>
</section>

Le <div class="service-card"> est purement visuel (pour appliquer un fond, une bordure, un padding à la carte) — la balise <section>, elle, porte le vrai sens sémantique du bloc.

<article> : un contenu autonome

Contient un contenu qui a du sens indépendamment du reste de la page — il pourrait être republié tel quel ailleurs (une fiche produit, une carte de témoignage, un commentaire). Différence avec <section> : une section est un regroupement thématique dans une page, un article est autonome.

Important sur la hiérarchie des titres : un <article> est très souvent placé à l’intérieur d’une <section>, qui porte déjà un <h2>. Le titre de l’article doit alors descendre d’un niveau et utiliser un <h3>, jamais un <h2> — les niveaux de titre suivent une hiérarchie logique et imbriquée, pas une taille de texte choisie au hasard.

<section>
  <h2>Nos services</h2>

  <article>
    <h3>Développement web</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>

  <article>
    <h3>Formation UI</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </article>
</section>

Ici, deux <article> cohabitent dans la même <section> — une section n’est pas limitée à un seul article, elle peut en contenir plusieurs (ou aucun).

<footer> : le pied de page

Contient les informations de clôture d’une page ou d’une section : mentions légales, copyright, liens secondaires, réseaux sociaux.

<footer>
  <p>&copy; 2026 Mon Site. Tous droits réservés.</p>
</footer>

© est une entité HTML : une façon d’écrire certains caractères spéciaux qui ne peuvent pas (ou ne doivent pas) être tapés directement dans le code. Ici, elle affiche le symbole © . Ce n’est pas propre à <footer> : on peut l’utiliser dans n’importe quel texte HTML, dès qu’on a besoin de ce symbole.

Et <aside> ?

Cette balise existe pour du contenu tangentiel au sujet principal (un encart « à savoir », un lien vers un article similaire). En pratique elle reste peu utilisée par rapport aux autres balises de ce chapitre — on la mentionne pour mémoire, sans s’y attarder davantage.

Vue d’ensemble d’une page structurée

Avant l’exercice, voici à quoi ressemble une page qui combine toutes ces balises, en langage naturel : tout en haut, un bandeau header avec le logo et le menu de navigation. En dessous, la zone main occupe le centre de la page : elle contient une ou plusieurs section thématiques (par exemple « Nos services », « Notre équipe »), et à l’intérieur d’une de ces sections, un ou plusieurs article autonomes (par exemple des fiches produit). Tout en bas de la page, un bandeau footer affiche le copyright.

<body>
  <header>...</header>

  <main>
    <section>
      <h2>Nos services</h2>

      <div class="cards-wrapper">
        <article>...</article>
      </div>
    </section>
  </main>

  <footer>...</footer>
</body>

Le <div class="cards-wrapper"> sert ici à disposer les articles côte à côte avec Flexbox (vu aux chapitres 500-525) — encore un exemple de mélange div + sémantique.

Le squelette à suivre

Avant de vous lancer dans l’exercice, voici la structure exacte que votre page doit suivre, avec les balises vides à remplir vous-même :

<header>
  <div class="logo-wrapper">
    <img src="logo.png" alt="Logo">
    <h1>Mon Portfolio</h1>
  </div>
  <nav>
    <ul>
      <li><a></a></li>
      <li><a></a></li>
      <li><a></a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2></h2>
    <div class="">
      <article>
        <h3></h3>
        <p></p>
      </article>
      <article>
        <h3></h3>
        <p></p>
      </article>
    </div>
  </section>
  <section>
    <h2></h2>
    <p></p>
  </section>
</main>
<footer>
  <p></p>
</footer>

Comment lire ce squelette :

• Le <header> contient un <div class="logo-wrapper"> (logo + titre) puis une <nav> avec 3 liens vides à compléter.
• Le <main> contient deux <section> côte à côte (pas imbriquées l’une dans l’autre, l’une après l’autre).
• La première section a un <div class=""> vide (à vous de choisir le nom de la classe) qui regroupe deux <article>, chacun avec un <h3> et un <p> vides.
• La deuxième section est volontairement plus simple : juste un <h2> et un <p>, sans <div> ni <article>.
• Le <footer> contient un seul <p> vide.

À vous de remplir chaque balise vide avec le contenu demandé dans l’exercice ci-dessous.

Exercice

Avant de vous lancer, voici à quoi va ressembler le résultat final, en langage naturel :

Tout en haut, un header contient le logo et le titre du site (regroupés dans un div), suivis d’une navigation avec 3 liens. En dessous, la zone main contient deux sections l’une sous l’autre : la première, « Mes projets », affiche deux fiches projets côte à côte (chacune étant un article autonome avec son propre titre et sa description, regroupées dans un div pour la mise en page Flexbox) ; la seconde, « À propos de moi », est plus simple — c’est juste un titre suivi d’un paragraphe de présentation, sans aucun article à l’intérieur. Tout en bas, un footer affiche la mention de copyright.

Maintenant que vous visualisez le résultat, à vous de le construire :

Construisez la structure complète d’une page « Mon Portfolio » avec :

1. Un <header> contenant un <div> regroupant un logo (une image) et un titre, suivi d’une <nav> avec 3 liens (Accueil, Projets, Contact).
2. Un <main> contenant deux <section> :
   • « Mes projets » : avec un <div> regroupant deux <article> (un par projet, chacun avec un titre et une description).
   • « À propos de moi » : un titre et un paragraphe de présentation, sans <article> à l’intérieur.
3. Un <footer> avec une mention de copyright (utilisez l’entité ©).

Corrigé

⚠️ NE REGARDEZ PAS LA SOLUTION AVANT D’AVOIR ESSAYÉ !

Bloqué ? Cliquez sur le bouton ci-dessous pour afficher le résultat attendu.

<header>
  <div class="logo-wrapper">
    <img src="logo.png" alt="Logo">
    <h1>Mon Portfolio</h1>
  </div>

  <nav>
    <ul>
      <li><a href="#accueil">Accueil</a></li>
      <li><a href="#projets">Projets</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Mes projets</h2>

    <div class="cards-wrapper">
      <article>
        <h3>Projet 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>

      <article>
        <h3>Projet 2</h3>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </article>
    </div>
  </section>

  <section>
    <h2>À propos de moi</h2>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p
  </section>
</main>

<footer>
  <p>&copy; 2026 Mon Portfolio.</p>
</footer>