HTML • Page 4 / HTML sémantique

HTML sémantique : donner du sens à ta page

Tu sais maintenant faire du texte, des listes, des formulaires, des tableaux. Maintenant on va voir comment organiser logiquement une page avec des balises sémantiques : <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.

1. C’est quoi « HTML sémantique » ?

« Sémantique » = qui a du sens. En HTML, ça veut dire utiliser des balises qui décrivent le rôle du contenu, plutôt que tout faire avec des <div>.

Exemple non sémantique

<div>Mon site</div>
<div>Menu</div>
<div>Contenu principal</div>
<div>Pied de page</div>

Exemple sémantique

<header>Mon site</header>
<nav>Menu</nav>
<main>Contenu principal</main>
<footer>Pied de page</footer>

Pourquoi c’est mieux ?

Plus lisible pour toi et les autres développeurs.
Plus compréhensible pour les lecteurs d’écran (accessibilité).
Meilleur pour le référencement (SEO) : les moteurs comprennent la structure.

Quelle balise est la plus adaptée pour le contenu principal d’une page ?

2. Les principales balises sémantiques

<header>

Zone en haut de la page ou d’une section (souvent logo + titre + menu).

<nav>

Zone qui contient la navigation principale (liens vers les pages importantes).

<main>

Contenu principal de la page (une seule fois par page).

<section>

Section thématique de la page (bloc logique de contenu).

<article>

Contenu autonome (article de blog, carte produit, post...).

<aside>

Contenu « à côté » : sidebar, infos secondaires, pub…

<footer>

Pied de page : infos légales, liens secondaires, copyright.

<header> : bannière / logo / titre

<nav> : menu principal

<aside> : colonne latérale (optionnel)

Exercice : comment s’appelle la balise qui sert à regrouper le contenu principal unique de la page ?

3. Construire une vraie structure de page

Voici un exemple de squelette complet de page avec HTML sémantique :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon site sémantique</title>
  </head>
  <body>
    <header>
      <h1>Mon site</h1>
      <nav>
        <ul>
          <li><a href="index.html">Accueil</a></li>
          <li><a href="html-1.html">HTML</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <h2>Derniers articles</h2>

        <article>
          <h3>Comprendre les balises HTML</h3>
          <p>Un article qui explique les bases du HTML...</p>
          <a href="article-html.html">Lire la suite</a>
        </article>

        <article>
          <h3>Découvrir le CSS</h3>
          <p>Premiers pas avec le langage du style...</p>
          <a href="article-css.html">Lire la suite</a>
        </article>
      </section>
    </main>

    <aside>
      <h2>Info rapide</h2>
      <p>Inscris-toi à la newsletter !</p>
    </aside>

    <footer>
      <p>© 2025 Mon site. Tous droits réservés.</p>
    </footer>
  </body>
</html>

Remarque : l’emplacement exact de <aside> dépend du design (certains le placent à l’intérieur de <main>). L’important, c’est le sens : contenu secondaire.

Dans cet exemple, où se trouvent les articles de blog ?

4. Menus de navigation propres

Un menu de navigation, c’est souvent une liste de liens. On combine donc <nav>, <ul>, <li> et <a>.

Mauvais exemple

<nav>
  <a href="index.html">Accueil</a>
  <a href="html-1.html">HTML</a>
  <a href="css-1.html">CSS</a>
</nav>

Meilleur exemple

<nav>
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="html-1.html">HTML</a></li>
    <li><a href="css-1.html">CSS</a></li>
  </ul>
</nav>

Exercice : entre le nom de la balise utilisée pour regrouper les liens du menu dans un bloc de navigation.

5. Mini-projet : maquette d’un mini-site

Crée un fichier site-structure.html qui contient uniquement la structure (pas besoin de CSS pour l’instant) :

Un <header> avec le titre du site + un menu de navigation.
Un <main> avec 2 sections :

Section 1 : description du site
Section 2 : liste de 3 articles (utilise <article>)

Un <aside> avec des infos secondaires (par ex. “Astuce du jour”).
Un <footer> avec ton nom / pseudo et l’année.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mini site structuré</title>
  </head>
  <body>
    <header>
      <h1>Mini site structuré</h1>
      <nav>
        <ul>
          <li><a href="index.html">Accueil</a></li>
          <li><a href="html-1.html">Tutoriels HTML</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <h2>À propos du site</h2>
        <p>Explique à quoi sert ton site.</p>
      </section>

      <section>
        <h2>Derniers tutoriels</h2>

        <article>
          <h3>Tutoriel 1</h3>
          <p>Un petit résumé du tutoriel 1.</p>
        </article>

        <article>
          <h3>Tutoriel 2</h3>
          <p>Un petit résumé du tutoriel 2.</p>
        </article>

        <article>
          <h3>Tutoriel 3</h3>
          <p>Un petit résumé du tutoriel 3.</p>
        </article>
      </section>
    </main>

    <aside>
      <h2>Astuce du jour</h2>
      <p>Utilise <main> pour ton contenu principal !</p>
    </aside>

    <footer>
      <p>Site créé par [ton pseudo], 2025.</p>
    </footer>
  </body>
</html>

Quand tu passeras au CSS, tu pourras transformer cette structure en vrai design : header fixe, menu horizontal, main en deux colonnes, etc. 😉

← Page précédente (HTML 3) Page suivante (HTML 5) →