Les balises sémantiques HTML5 expliquées clairement

Ouvrez le code source de n'importe quel vieux site. Vous allez trouver des <div> partout. Des <div> pour le menu, des <div> pour l'en-tête, des <div> pour le pied de page. Le site s'affiche correctement — mais pour Google et les lecteurs d'écran, c'est du bruit sans signification.

HTML5 a introduit des balises qui changent ça. Pas pour styliser les éléments — ça, c'est le rôle de CSS. Pour donner du sens à chaque zone de la page. C'est ce qu'on appelle les balises sémantiques.

Cet article explique ce qu'elles sont, comment les utiliser, et ce que ça change concrètement pour votre site.

Qu'est-ce qu'une balise sémantique ?

Une balise HTML neutre comme <div> n'a aucune signification propre. Elle sert à regrouper des éléments pour les styliser ou les manipuler avec JavaScript — c'est tout. Google voit un <div> et ne sait pas ce qu'il contient.

Une balise sémantique, elle, décrit ce qu'elle entoure. <header> dit au navigateur et aux robots d'indexation : "ce qui est ici, c'est l'en-tête de la page". <nav> signale : "voici la navigation principale". <footer> annonce : "c'est le pied de page".

Ce n'est pas une question d'apparence. Ces balises ne changent rien visuellement — c'est CSS qui gère le rendu. Elles transmettent du sens là où <div> n'en transmet aucun.

Balise neutre	Balise sémantique	Ce que ça apporte
<div id="header">	<header>	Google identifie l'en-tête
<div id="nav">	<nav>	Navigation reconnue par les robots et synthèses vocales
<div id="content">	<main>	Contenu principal isolé du reste
<div class="sidebar">	<aside>	Contenu secondaire identifié comme tel

Les 7 balises HTML5 de structure à connaître

Voici les balises sémantiques principales introduites avec HTML5. Elles définissent la structure HTML5 d'une page web — chaque grande zone a sa balise dédiée. Pour comprendre leur place dans l'ensemble — HTML pour la structure, CSS pour l'apparence — vous pouvez lire ce que HTML, CSS et JavaScript font concrètement.

<header> — l'en-tête

<header> désigne la section d'en-tête d'une page ou d'une section. Sur un site vitrine, c'est là que se trouvent le logo, le nom de l'entreprise et la navigation principale.

Une page peut contenir plusieurs <header> — un pour la page entière, un autre à l'intérieur d'un <article> pour son titre et sa date. Ce n'est pas une erreur de structure.

<header>
  <a href="/">Dupont Plomberie — Lyon</a>
  <nav aria-label="Menu principal">
    <a href="/services">Nos services</a>
    <a href="/contact">Contact urgence</a>
  </nav>
</header>

<nav> — la navigation

<nav> regroupe les liens de navigation principale du site. Pas tous les liens — seulement ceux qui servent à naviguer entre les grandes sections ou pages. Un lien en bas d'article vers un autre article n'a pas besoin d'être dans un <nav>.

Les technologies d'assistance (lecteurs d'écran, synthèses vocales) utilisent <nav> pour permettre aux personnes malvoyantes de sauter directement à la navigation. C'est fonctionnel bien au-delà du simple SEO.

<main> — le contenu principal

<main> délimite le contenu principal de la page — ce pourquoi l'utilisateur est venu. Sur la page d'un salon de coiffure, c'est la description des services, les tarifs, les photos. Sur un article de blog, c'est le corps de l'article lui-même.

Règle importante : une seule balise <main> par page. C'est là que Google identifie le contenu réel à indexer, distinct de la navigation et du pied de page. C'est aussi la balise la plus souvent oubliée dans les sites mal construits.

<article> — un contenu autonome

<article> désigne un contenu qui a du sens tout seul, extrait du reste de la page. Un article de blog, une fiche produit, un avis client, un commentaire : chacun peut être lu indépendamment de son contexte.

Sur le site d'un électricien qui publie des conseils pratiques, chaque conseil est un <article>. Si quelqu'un partage cet article ailleurs, son contenu reste cohérent et complet.

<section> — un regroupement thématique

<section> regroupe des contenus liés par un même thème. Sur un site vitrine, la zone "Nos prestations" est une <section>. La zone "Zone d'intervention" en est une autre. La zone "Avis clients" également.

Contrairement à <article>, une <section> n'a pas de sens si on l'extrait de la page. Elle appartient à un contexte.

<aside> — le contenu secondaire

<aside> désigne un contenu complémentaire mais non essentiel à la compréhension du contenu principal. Une barre latérale avec les coordonnées, un encadré "À lire aussi", une citation mise en avant — tout ce qui enrichit sans être central.

Google comprend que le contenu dans un <aside> est secondaire. Il ne lui accorde pas le même poids qu'au texte dans <main>.

<footer> — le pied de page

<footer> clôt la page. On y trouve généralement les mentions légales, les liens de contact secondaires, les réseaux sociaux, le copyright. Comme <header>, il peut apparaître à l'intérieur d'un <article> pour en signaler l'auteur ou la date de publication.

Exemple complet — page vitrine d'un plombier

Voici comment ces 7 balises s'assemblent dans une vraie page :

<header>
  <a href="/">Dupont Plomberie — Lyon</a>
  <nav aria-label="Menu principal">
    <a href="/services">Nos services</a>
    <a href="/zone">Zone d'intervention</a>
    <a href="/contact">Contact urgence</a>
  </nav>
</header>

<main>
  <section>
    <h2>Nos services de plomberie à Lyon</h2>
    <p>Dépannage urgent 24h/24, installation sanitaire, rénovation salle de bain.</p>
  </section>

  <section>
    <h2>Zone d'intervention</h2>
    <p>Lyon et agglomération — intervention sous 2 heures.</p>
  </section>
</main>

<aside>
  <p>Urgence plomberie 24h/24 — 06 12 34 56 78</p>
</aside>

<footer>
  <address>Jean Dupont Plomberie — 69000 Lyon — SIRET : 123 456 789 00012</address>
</footer>

Pas de <div> inutile. Chaque zone dit ce qu'elle est. Google sait où chercher les services, où est la navigation, où sont les coordonnées légales.

<article> ou <section> — comment choisir ?

C'est la confusion la plus fréquente. La règle pratique est simple :

Si le contenu a du sens extrait de la page, c'est un <article>.
Si le contenu n'a de sens qu'en contexte, c'est une <section>.

Thomas gère un gîte en Dordogne. Sur son site, il publie des articles sur les randonnées et les marchés locaux — chacun est un <article>, lisible indépendamment. La liste de ses chambres disponibles, en revanche, est une <section> : extraite du site, cette liste ne dit plus rien.

Contenu	Bonne balise	Pourquoi
Article de blog	<article>	Sens intact si partagé ou syndiqué ailleurs
Avis client	<article>	Unité de contenu autonome et identifiable
Liste de services	<section>	Thématique de la page, pas autonome
Zone "À propos"	<section>	Appartient au contexte de la page
Conteneur purement stylistique	<div>	Aucune valeur sémantique attendue

Ce que ça change pour le référencement

Les balises sémantiques ne sont pas un facteur de classement direct. Elles ne font pas remonter un site par magie. Mais elles changent la façon dont Google lit vos pages.

Quand Google crawle un site bien balisé, il identifie instantanément où est le contenu principal (<main>), quels liens sont de navigation (<nav>), et quel contenu est secondaire (<aside>). Il peut pondérer les zones en conséquence — le texte dans <main> pèse plus que le texte dans <footer>.

Pour référencer son site sur Google localement, une structure claire aide à associer le contenu clé — zone d'intervention, services, coordonnées — aux bons signaux d'indexation.

L'accessibilité joue aussi un rôle indirect. Les lecteurs d'écran utilisent les balises sémantiques comme repères de navigation pour les personnes malvoyantes. Un site accessible correctement balisé est considéré comme un signal de qualité par Google dans son évaluation globale des pages.

Détail utile : Google affiche un AI Overview sur ce sujet — c'est-à-dire qu'il génère une réponse automatique en tête de résultats. Ce qu'il extrait pour la construire, c'est le contenu dans <main>. Un site bien balisé rend ce travail d'extraction plus précis.

Les erreurs fréquentes à éviter

La plus courante : tout mettre dans des <div>, même quand une balise sémantique existe. C'est le réflexe hérité de HTML4, où <div> était la seule option pour regrouper des éléments. Aujourd'hui, c'est un raccourci qui appauvrit la structure.

Autres erreurs fréquentes, souvent dans les sites générés par les builders :

• Plusieurs <main> sur la même page — il n'en faut qu'un seul. Deux <main>, c'est une erreur que les validateurs HTML signalent.
• Utiliser <section> comme un simple <div> — <section> doit regrouper un contenu thématique identifiable, pas servir de conteneur pour un effet de mise en page.
• Oublier <main> complètement — c'est la balise la plus souvent absente. Sans elle, Google ne sait pas où est le contenu réel à indexer.
• Imbriquer <nav> dans <nav> — inutile et incorrect. Un seul niveau de navigation par bloc.

Les outils de construction automatique — Wix, Squarespace, certains constructeurs de pages — génèrent souvent des centaines de <div> imbriqués avec peu ou pas de balises sémantiques. C'est l'une des raisons structurelles pour lesquelles ces sites partent avec un désavantage d'indexation par rapport à un contenu écrit et balisé avec soin.

Récapitulatif — quelle balise pour quoi ?

Balise	Rôle	Par page	Exemple d'usage
<header>	En-tête de page ou de section	Plusieurs possible	Logo + menu principal
<nav>	Navigation principale	1 à 2	Menu, liens de navigation
<main>	Contenu principal	1 seul	Services, article, tarifs
<article>	Contenu autonome et distribuable	Autant que nécessaire	Article de blog, avis client
<section>	Regroupement thématique	Autant que nécessaire	"Nos services", "Tarifs"
<aside>	Contenu secondaire	Autant que nécessaire	Barre latérale, encadré info
<footer>	Pied de page ou de section	Plusieurs possible	Mentions légales, copyright

Questions fréquentes

C'est quoi une balise sémantique en HTML ?

C'est une balise qui indique ce que contient la zone qu'elle délimite — pas comment l'afficher. <header>, <nav>, <main>, <article>, <section>, <aside> et <footer> sont les principales, toutes introduites avec HTML5. Une <div>, elle, ne dit rien de ce qu'elle contient.

Les balises sémantiques améliorent-elles le référencement ?

Indirectement, oui. Elles ne font pas remonter mécaniquement un site, mais elles aident Google à identifier clairement le contenu principal, la navigation et les zones secondaires. Cela facilite l'indexation des pages, en particulier pour les sites à contenu dense. Pour aller plus loin, la rédaction SEO et la structure HTML vont de pair.

Quelle différence entre <article> et <section> ?

<article> contient un contenu qui a du sens extrait de la page. <section> regroupe des contenus liés par un thème mais qui appartiennent au contexte de la page. Un article de blog ou un avis client : <article>. La zone "Nos prestations" d'un artisan : <section>.

HTML5 a-t-il supprimé les <div> ?

Non. Les <div> restent valides et utiles pour les zones purement stylistiques, sans valeur sémantique. La règle est simple : quand une balise sémantique existe pour décrire ce que vous faites, utilisez-la. Quand vous regroupez des éléments uniquement pour les styliser en CSS, <div> est le bon choix.

Ce qu'il faut retenir

Les balises sémantiques HTML5, une fois le réflexe pris, remplacent naturellement les <div> dans la plupart des zones. Le code devient plus lisible, la structure plus claire, l'indexation plus fluide.

Les trois piliers de la structure HTML sont <header>, <nav> et <footer> — présents sur toutes les pages sans exception. Les quatre autres (<main>, <article>, <section>, <aside>) s'ajoutent selon le contenu.

Pour un site vitrine d'artisan ou de TPE, les 7 balises de base suffisent : <header>, <nav>, <main>, <article>, <section>, <aside> et <footer>. Un développeur qui les utilise par défaut vous livre un site structurellement solide — plus facile à maintenir, mieux compris par les robots d'indexation, et accessible à tous les utilisateurs.