Les balises HTML5 sémantiques

Les balises sémantiques donnent du sens à votre contenu. Voyons les principales balises que vous utiliserez pour structurer votre site d’histoires.

`<header>`

Contient l’en-tête d’une page ou d’une section. Généralement utilisé pour le logo, le titre principal, la navigation.

<header>
  <h1>Les Aventures de Léo</h1>
  <p>Une histoire pour les 6-8 ans</p>
</header>

`<nav>`

Contient les liens de navigation principaux du site.

<nav>
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/chapitres">Chapitres</a></li>
    <li><a href="/personnages">Personnages</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

`<main>`

Contient le contenu principal de la page. Il ne doit y en avoir qu’un seul par page.

<main>
  <h1>Chapitre 1 : Le début de l'aventure</h1>
  <p>Léo se réveilla ce matin-là avec une étrange sensation...</p>
</main>

`<article>`

Représente un contenu autonome qui pourrait être distribué indépendamment (un article de blog, un chapitre, une histoire).

<article>
  <h2>Chapitre 1</h2>
  <p>Il était une fois...</p>
</article>

`<section>`

Regroupe du contenu thématiquement lié. Utilisez-le pour diviser votre contenu en sections logiques.

<article>
  <h1>L'histoire de Léo</h1>

  <section>
    <h2>Le matin</h2>
    <p>Léo se réveille...</p>
  </section>

  <section>
    <h2>L'après-midi</h2>
    <p>L'aventure commence...</p>
  </section>

  <section>
    <h2>Le soir</h2>
    <p>Tout se termine bien...</p>
  </section>
</article>

`<aside>`

Contenu tangentiel ou complémentaire (encadré, information connexe, publicité).

<aside>
  <h3>Le saviez-vous ?</h3>
  <p>Les dragons dans cette histoire sont inspirés de vrais animaux...</p>
</aside>

`<footer>`

Pied de page d’une page ou d’une section. Contient généralement des informations de copyright, des liens légaux, etc.

<footer>
  <p>&copy; 2025 - Les Aventures de Léo</p>
  <p>Créé par [Votre nom]</p>
</footer>

Structure complète d’une page

Voici un exemple complet qui combine tous ces éléments :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Les Aventures de Léo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- En-tête du site -->
  <header>
    <h1>Les Aventures de Léo</h1>
    <nav>
      <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/chapitres">Chapitres</a></li>
        <li><a href="/personnages">Personnages</a></li>
      </ul>
    </nav>
  </header>

  <!-- Contenu principal -->
  <main>
    <article>
      <header>
        <h2>Chapitre 1 : Le réveil</h2>
        <p>Publié le 15 janvier 2025</p>
      </header>

      <section>
        <h3>Le matin</h3>
        <p>Léo se réveilla ce matin-là...</p>
      </section>

      <section>
        <h3>La découverte</h3>
        <p>Dans le jardin, il aperçut...</p>
      </section>

      <footer>
        <p>Fin du chapitre 1</p>
      </footer>
    </article>

    <aside>
      <h3>À propos de Léo</h3>
      <p>Léo est un garçon curieux de 8 ans...</p>
    </aside>
  </main>

  <!-- Pied de page du site -->
  <footer>
    <p>&copy; 2025 - Les Aventures de Léo</p>
  </footer>

</body>
</html>

Questions fréquentes

Quand utiliser `<section>` vs `<article>` vs `<div>` ?

<article> : contenu autonome (un article de blog, un chapitre, une carte de produit)
<section> : regroupement thématique dans un article (les différentes parties d’un chapitre)
<div> : conteneur sans signification sémantique (uniquement pour le style CSS)

Exemple pratique :

<article>  <!-- Un chapitre complet -->
  <h2>Chapitre 1</h2>

  <section>  <!-- Une partie du chapitre -->
    <h3>Le matin</h3>
    <p>...</p>
  </section>

  <div class="illustration">  <!-- Juste pour le style -->
    <img src="leo.jpg" alt="Léo">
  </div>
</article>

Puis-je avoir plusieurs `<main>` ?

Non, un seul <main> par page. C’est le contenu principal, unique.

Puis-je imbriquer des `<header>` et `<footer>` ?

Oui ! Vous pouvez avoir un <header> et <footer> pour la page entière, et d’autres dans vos <article>.

<body>
  <header><!-- En-tête de la page --></header>

  <main>
    <article>
      <header><!-- En-tête de l'article --></header>
      <p>Contenu...</p>
      <footer><!-- Pied de l'article --></footer>
    </article>
  </main>

  <footer><!-- Pied de la page --></footer>
</body>

Les balises HTML5 sémantiques

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>