Quels sont les éléments sémantiques en HTML et à quoi servent-ils?

Les éléments sémantiques en HTML sont des balises (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) qui décrivent la signification du contenu qu'ils enveloppent, et non seulement son apparence.

Objectif principal :

• Accessibilité : Aident les technologies d'assistance (lecteurs d'écran) à comprendre la structure et le contenu de la page, rendant le contenu accessible aux utilisateurs avec des handicaps.
• SEO (Optimisation pour les moteurs de recherche) : Les moteurs de recherche indexent et classent mieux les pages avec un balisage sémantique, car ils peuvent déterminer plus précisément le contenu principal et sa pertinence par rapport aux requêtes.
• Développement et maintenance : Améliorent la lisibilité et la maintenabilité du code, rendant la structure de la page plus compréhensible pour d'autres développeurs (et pour vous-même à l'avenir).
• Meilleure compréhension de la structure : Permettent de diviser clairement les blocs logiques de la page (navigation, contenu principal, pied de page, etc.).

Exemple de balisage non sémantique :

<div>
  <h2>Titre de l'article</h2>
  <p>Contenu de l'article...</p>
</div>
<div>
  <h3>Barre latérale</h3>
  <p>Informations de la barre latérale...</p>
</div>

Exemple de balisage sémantique :

<article>
  <h2>Titre de l'article</h2>
  <p>Contenu de l'article...</p>
</article>
<aside>
  <h3>Barre latérale</h3>
  <p>Informations de la barre latérale...</p>
</aside>

L'utilisation d'éléments sémantiques contribue à créer des pages web plus structurées, accessibles et optimisées pour les moteurs de recherche.