Structurer sa page

Pourquoi la structure est importante

Tu sais créer du contenu HTML et le styliser avec CSS. Mais comment organiser les grandes zones d'une page : l'en-tête, le menu, le contenu, le pied de page ?

Avant, on utilisait des <div> avec des classes : <div class="header">, <div class="nav">… HTML5 a introduit quelque chose de mieux : des balises avec un sens intégré. On les appelle des balises sémantiques.

C'est quoi "sémantique" ?

"Sémantique" veut dire "qui a du sens". Une balise sémantique dit par son nom ce qu'elle contient. Visuellement, c'est pareil qu'un <div>. Mais le code est clair.

Pourquoi c'est utile :

Accessibilité — les lecteurs d'écran naviguent entre les zones de la page.
SEO — Google comprend mieux la structure et référence mieux la page.
Lisibilité — n'importe qui lit le code et comprend l'organisation.

La structure type d'une page web

Voici une page HTML5 moderne. Chaque zone a sa balise.

<header> — en-tête : logo, titre du site

<nav> — navigation principale : les liens du menu

<main> — contenu principal de la page

<aside> — contenu secondaire : sidebar

Les balises sémantiques principales

HTML — structure type complète

<body>

  <!-- En-tête du site : logo, titre, slogan -->
  <header>
    <h1>Mon Site Web</h1>
    <p>Mon slogan accrocheur</p>
  </header>

  <!-- Menu de navigation principale -->
  <nav>
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Contenu principal — une seule balise main par page -->
  <main>

    <!-- Section thématique avec un titre -->
    <section>
      <h2>À propos</h2>
      <p>Présentation du site ou de l'auteur.</p>
    </section>

    <!-- Section avec des articles -->
    <section>
      <h2>Articles récents</h2>

      <!-- Article autonome et réutilisable -->
      <article>
        <h3>Mon premier article</h3>
        <p>Contenu de l'article...</p>
      </article>

      <article>
        <h3>Mon deuxième article</h3>
        <p>Contenu...</p>
      </article>
    </section>

  </main>

  <!-- Contenu secondaire : liens connexes, pub, widget... -->
  <aside>
    <h3>Articles populaires</h3>
    <p>Liens connexes...</p>
  </aside>

  <!-- Pied de page -->
  <footer>
    <p>© 2026 Mon Site Web. Tous droits réservés.</p>
  </footer>

</body>

À quoi sert chaque balise ?

<header> — en-tête du site ou d'une section. Logo, titre, slogan. Tu peux en avoir plusieurs (site + en-tête d'article…).
<nav> — groupe de liens de navigation. Menu principal, menu secondaire, pagination. Plusieurs autorisés par page.
<main> — le contenu principal de la page. Un seul par page. Google l'analyse en priorité.
<section> — groupe de contenu avec un thème commun. Chaque section devrait avoir un titre (h2, h3…).
<article> — contenu autonome qui a du sens seul. Article de blog, carte produit, commentaire. Tu te demandes : "ce contenu aurait-il du sens sorti de son contexte ?" Si oui → article.
<aside> — contenu secondaire lié au principal. Barre latérale, liens connexes, encarts.
<footer> — pied de page. Copyright, liens légaux, contact, plan du site.

div et span : les conteneurs sans sens

<div> et <span> n'ont pas de signification particulière. Utilise-les quand aucune balise sémantique ne convient.

<div> — conteneur bloc. Pour grouper des éléments et leur appliquer du CSS.
<span> — conteneur inline. Pour cibler un mot dans un texte avec CSS, sans créer de bloc.

💡

Règle simple : cherche d'abord une balise sémantique : header, nav, main, section, article, aside, footer. Si rien ne correspond, utilise div ou span. Évite de tout mettre dans des <div>.

Disposer les zones avec Flexbox

Tu as les zones sémantiques. Comment les disposer visuellement ? Flexbox s'applique aussi à la mise en page globale.

CSS

/* Le body s'étend sur toute la hauteur de l'écran */
body {
  display: flex;
  flex-direction: column;  /* zones empilées verticalement */
  min-height: 100vh;        /* au moins toute la hauteur de l'écran */
}

/* Zone centrale : main + aside côte à côte */
.zone-centrale {
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

/* main prend tout l'espace restant */
main { flex: 1; }

/* aside : largeur fixe */
aside { width: 280px; }

/* footer colle au bas de la page */
footer { margin-top: auto; }

// à toi de jouer

Structure une page complète

Objectif : ajoute du contenu dans chaque zone sémantique. Ajoute des liens dans le <nav>, un article dans le <main> et une adresse dans le <footer>.

Éditeur live

HTML

CSS

Résultat

// à retenir

Les balises sémantiques HTML5 donnent du sens à la structure de la page.
<header> = en-tête. <nav> = navigation. <main> = contenu principal (un seul par page).
<section> = groupe thématique avec titre. <article> = contenu autonome réutilisable.
<aside> = contenu secondaire. <footer> = pied de page.
<div> et <span> = conteneurs génériques sans sémantique. À utiliser en dernier recours.
Bonne sémantique = meilleure accessibilité + meilleur SEO + code plus lisible.