# Élément sémantique

> Balise HTML qui décrit le rôle réel de son contenu, comme un en-tête ou une navigation, plutôt qu'une simple division neutre sans signification propre.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/element-semantique/

Deux blocs visuellement identiques à l'écran peuvent raconter une histoire très différente au code qui les lit : un lecteur d'écran, un moteur de recherche ou un script d'analyse comprend immédiatement qu'une balise `<nav>` contient un menu, alors qu'une simple `<div>` ne dit rien de son rôle sans classe ou attribut supplémentaire.

## Les balises les plus utiles

HTML5 a introduit une famille dédiée à la structure d'une page : `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>` et `<footer>` couvrent la majorité des besoins d'un gabarit :

```
<article>
  <header>
    <h1>Titre de l'article</h1>
  </header>
  <p>Contenu de l'article.</p>
</article>
```

Les gabarits générés par WordPress, aussi bien les thèmes classiques que les thèmes à blocs, s'appuient massivement sur ces balises pour structurer l'en-tête, le contenu principal et le pied de page du site.

## Bon à savoir

- Ces balises n'apportent en général aucun style visuel par défaut : leur intérêt est purement structurel, à charge du CSS de définir l'apparence.
- Utiliser `<article>` pour un contenu qui aurait du sens isolé de son contexte (un article de blog, un commentaire) est une convention plus précise qu'une simple `<section>` générique.
- Une page ne devrait comporter qu'un seul élément `<main>`, réservé au contenu réellement central de la page, distinct des menus, encarts latéraux ou pieds de page qui l'entourent.
- Empiler des `<div>` partout là où une balise sémantique existe déjà revient à se priver, sans bénéfice réel, des annonces automatiques que les lecteurs d'écran font pour ces structures reconnues.