↩

7 : Balises sémantiques

Introduction

Les balises sémantiques en HTML permettent de structurer une page web en donnant du sens aux différentes parties du contenu. Contrairement aux balises génériques comme <div> ou <span>, elles expliquent clairement le rôle des éléments, ce qui est très utile pour les moteurs de recherche et les technologies d'assistance.

Pourquoi utiliser les balises sémantiques ?

Accessibilité : Elles facilitent la navigation pour les personnes utilisant des lecteurs d'écran.
SEO : Les moteurs de recherche comprennent mieux la structure du contenu.
Lisibilité : Le code devient plus clair et plus facile à maintenir.

Les principales balises sémantiques

<header> : représente l’en-tête d’une page ou d’une section.
<nav> : contient les liens de navigation.
<main> : contenu principal de la page.
<section> : regroupe une section thématique.
<article> : contenu indépendant comme un article de blog.
<aside> : contenu secondaire comme une barre latérale.
<footer> : pied de page.

Exemple d'utilisation :

<body>
  <header>
    <h1>Mon site web</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Titre de l'article</h2>
      <p>Contenu de l'article...</p>
    </article>
    <aside>
      <p>Contenu secondaire...</p>
    </aside>
  </main>

  <footer>
    <p>© 2025 Mon site web</p>
  </footer>
</body>

Conclusion

L'utilisation des balises sémantiques est devenue une bonne pratique essentielle en développement web moderne. Elles améliorent la structure, l'accessibilité et le référencement des sites.