# Balisage sémantique HTML

> Le balisage sémantique HTML désigne l'usage de balises dont le nom décrit le rôle du contenu qu'elles encadrent, plutôt que sa simple apparence. Des éléments comme <header>, <nav>, <main>, <article>, <section>, <aside> ou <footer> indiquent explicitement la fonction de chaque bloc, tandis que <h1> à <h6> hiérarchisent les titres et que <strong>, <em>, <time> ou <figure> précisent le sens des contenus. Cette structuration aide les moteurs de recherche, les modèles de langage et les technologies d'assistance à comprendre l'organisation d'une page sans dépendre du style visuel. Introduit massivement avec HTML5, le balisage sémantique remplace l'empilement de balises <div> et <span> génériques par un code lisible et signifiant. Il constitue une base technique du référencement : un document bien balisé est plus facile à explorer, à indexer, à citer et à transformer en extrait enrichi par les moteurs et les IA génératives.

[source]: https://luwiz.io/glossaire/balisage-semantique

---

Le balisage sémantique consiste à choisir chaque balise HTML pour ce qu'elle signifie, et non pour l'effet visuel qu'elle produit. C'est l'une des pratiques de fond du référencement technique, souvent invisible pour l'utilisateur mais déterminante pour les machines qui lisent vos pages.

## Comment ça marche

HTML5 a introduit une famille de balises structurantes qui décrivent le rôle de chaque zone : `<header>` pour l'en-tête, `<nav>` pour la navigation, `<main>` pour le contenu principal, `<article>` pour une unité autonome, `<aside>` pour un complément et `<footer>` pour le pied de page. À l'intérieur, la hiérarchie des titres de la [balise H1](/glossaire/balise-h1) jusqu'aux H6 organise l'information en niveaux logiques. D'autres balises comme `<time>`, `<figure>`, `<figcaption>`, `<strong>` ou `<em>` ajoutent du sens à des fragments précis.

Un robot d'exploration ou un modèle de langage analyse cet arbre balisé pour repérer où commence le contenu utile, comment il s'articule et quels passages répondent à une intention. Sans sémantique, une succession de `<div>` ne transmet aucune indication de fonction.

## Pourquoi c'est important

Un balisage propre profite à trois publics. Aux moteurs, qui explorent et indexent plus efficacement. Aux technologies d'assistance, qui s'appuient sur la structure pour restituer la page aux personnes en situation de handicap. Aux IA génératives, qui extraient plus facilement un passage net et autoportant pour le citer dans une réponse.

<Callout label="A retenir">Une page bien balisée est lisible par les humains comme par les machines : c'est la condition d'une bonne indexation et d'une bonne citabilité.</Callout>

## Exemple concret

Remplacer `<div class="titre">` par un vrai `<h2>`, encadrer le corps de l'article dans `<article>` et les dates dans `<time datetime="2026-06-15">` suffit à clarifier la structure. Couplé à des [données structurées](/glossaire/donnees-structurees) en JSON-LD, ce socle sémantique maximise vos chances d'apparaître en extrait enrichi et d'être repris par les moteurs comme par les assistants IA.