Qu’est-ce que la sémantique en HTML ?

Les balises sémantiques donnent du sens au contenu. Elles permettent de structurer une page de manière logique, utile pour les moteurs de recherche et l’accessibilité.

Les principales balises sémantiques HTML5

• <header> : en-tête de page ou de section
• <nav> : menu de navigation
• <main> : contenu principal
• <section> : regroupe un thème ou une rubrique
• <article> : contenu autonome (article, blog, etc.)
• <aside> : contenu secondaire (sidebar, publicité...)
• <footer> : pied de page ou de section

Exemple de structure complète

<header>
  <h1>Mon Site Web</h1>
  <nav>
    <a href="#">Accueil</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <section>
    <article>
      <h2>Article principal</h2>
      <p>Contenu de l'article...</p>
    </article>
  </section>
  <aside>
    <p>Publicité ou infos complémentaires</p>
  </aside>
</main>

<footer>
  <p>© 2025 Mon Site</p>
</footer>

Avantages

• Améliore le référencement naturel (SEO)
• Facilite la lecture du code HTML
• Renforce l’accessibilité pour les technologies d’assistance