Balises sémantiques HTML5 : SEO et accessibilité

Pendant longtemps, la structure des pages web reposait quasi exclusivement sur la balise <div>. Bien que fonctionnelle, cette approche ne donne aucune information sur la nature du contenu qu’elle renferme. Le HTML5 a introduit les balises sémantiques pour remédier à ce problème en donnant du sens à la structure du code.

Qu’est-ce que le HTML sémantique ?

Le HTML sémantique consiste à utiliser des balises qui décrivent précisément leur contenu. Contrairement à une <div> ou une <span>, qui sont des conteneurs génériques sans signification particulière, une balise sémantique indique au navigateur, aux moteurs de recherche et aux outils d’accessibilité ce que représente l’élément.

Par exemple, au lieu d’utiliser <div class="footer">, on utilise la balise <footer>. Le résultat visuel est identique, mais la valeur technique est totalement différente.

Pourquoi utiliser des balises sémantiques ?

L’adoption d’une structure sémantique apporte deux bénéfices majeurs pour tout projet web.

L’amélioration du SEO (Référencement naturel)

Les robots d’indexation (comme Googlebot) analysent le code de votre page pour en comprendre le sujet. En utilisant des balises sémantiques, vous aidez ces robots à identifier rapidement les parties les plus importantes de votre page (le contenu principal, la navigation, les articles), ce qui peut favoriser un meilleur positionnement dans les résultats de recherche.

L’accessibilité web (a11y)

Les personnes malvoyantes utilisent des lecteurs d’écran qui parcourent le code HTML pour lire le contenu. Ces outils s’appuient sur les balises sémantiques pour permettre à l’utilisateur de naviguer rapidement. Par exemple, un utilisateur peut demander à son lecteur d’écran de passer directement au <main> pour éviter de relire tout le menu de navigation à chaque changement de page.

Les principales balises sémantiques HTML5

Voici les balises les plus couramment utilisées pour structurer une page moderne.

Structure globale de la page

• <header> : Représente l’en-tête d’une page ou d’une section. Il contient généralement le logo, le titre du site et le menu principal.
• <nav> : Définit un bloc de liens de navigation. On ne l’utilise que pour les menus principaux, pas pour tous les liens du site.
• <main> : Désigne le contenu principal et unique de la page. Il ne doit y avoir qu’un seul <main> par document.
• <footer> : Contient les informations de bas de page (copyright, mentions légales, contact).

Organisation du contenu

• <section> : Regroupe des contenus thématiquement liés. Une section a généralement un titre (H2-H6).
• <article> : Représente un contenu autonome qui pourrait être redistribué indépendamment (exemple : un article de blog, une fiche produit).
• <aside> : Contient des informations indirectement liées au contenu principal (barre latérale, publicités, liens connexes).

Exemple concret : Structurer une page web

Voyons la différence entre une approche non sémantique et une approche sémantique.

L’approche non sémantique (À éviter)

<div id="header">
  <div id="nav">...</div>
  </div>
  <div id="content">
    <div class="post">...</div>
    </div>
    <div id="footer">...</div>

L’approche sémantique (Recommandée)

<header>
  <nav>...</nav>
  </header>
  <main>
    <article>...</article>
    </main>
    <footer>...</footer>

Vérifier l’accessibilité et le SEO

Pour vous assurer que votre structure est correcte, vous pouvez utiliser plusieurs outils gratuits :

Conclusion

Passer au HTML sémantique est une étape simple mais puissante pour tout débutant en développement web. En remplaçant vos <div> par des balises comme <main>, <article> ou <nav>, vous rendez votre site plus professionnel, mieux référencé et surtout accessible à tous les utilisateurs, quel que soit leur mode de navigation.