Docs HTML exécutables : HTML sémantique

Q: Quelles sont les balises sémantiques en HTML ?

Les balises de mise en page sont , , , , , et . Parmi les autres balises sémantiques courantes : , , , , , et les titres à .

Q: La div est-elle un élément sémantique ?

Non. n'a aucune signification propre ; c'est une boîte générique pour le style et la mise en page. Utilisez-la quand aucune balise sémantique ne convient, et utilisez , , et les autres quand l'une d'elles convient.

Q: Combien d'éléments main une page peut-elle avoir ?

Un seul visible par page. Il entoure le contenu propre à cette page, et il ne doit pas se trouver dans , , , ou .

Ce qu'est le HTML sémantique

Le HTML sémantique consiste à choisir chaque balise pour ce qu'est le contenu : la navigation va dans <nav>, le contenu principal dans <main>, un article de blog dans <article>. Ces balises ressemblent à de simples boîtes, mais elles indiquent au navigateur, aux lecteurs d'écran et aux moteurs de recherche le rôle de chaque partie de la page. Voici une page complète construite avec les balises sémantiques de mise en page, chacune entourée et étiquetée :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Supprimez l'élément <style> et la page ressemble à du texte brut, mais la structure est toujours là pour qui lit le code, et pour les logiciels qui la lisent sans regarder les pixels.

Les balises sémantiques de mise en page

Balise	À utiliser pour	Repère pour les lecteurs d'écran
`<header>`	L'introduction de la page ou d'un article : logo, titre, auteur	banner (seulement hors de `article`, `aside`, `main`, `nav` ou `section`)
`<nav>`	Un bloc de liens de navigation principaux	navigation
`<main>`	Le contenu propre à cette page, une fois par page	main
`<article>`	Un contenu autonome qui a du sens seul : un article, un commentaire, une fiche produit	aucun par défaut
`<section>`	Un groupe de contenu thématique avec son propre titre	region, seulement s'il a un nom accessible
`<aside>`	Un contenu lié, à côté du fil principal : une barre latérale, une note	complementary
`<footer>`	Les informations de fin de la page ou d'un article : copyright, auteur, liens	contentinfo (seulement au niveau de la page)

Chaque balise a sa propre page plus détaillée : header, nav, section et footer. Cette page montre comment elles s'assemblent.

Pourquoi ne pas simplement utiliser des div

Une page construite uniquement avec des éléments <div> peut ressembler exactement à une page sémantique. La différence est ce que dit le balisage. Appuyez sur les boutons pour entourer les éléments porteurs de sens dans chaque version :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

La version en div en trouve 0, la version sémantique en trouve 4. C'est ce que voient les technologies d'assistance : un utilisateur de lecteur d'écran peut aller directement à la navigation ou au contenu principal sur la page sémantique, et doit tout parcourir sur la page en div. Des noms de classes comme class="nav" ne signifient rien pour le navigateur.

<div> reste le bon choix pour les boîtes qui n'existent que pour le style ou la mise en page, comme le conteneur flex .cols du premier exemple.

main, article et aside

<main> entoure ce qui est propre à cette page et n'apparaît qu'une fois. À l'intérieur, <article> marque un contenu qui aurait du sens copié seul sur un autre site, et <aside> marque un contenu lié qu'on pourrait retirer sans casser l'article :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

L'article a son propre <header> et son propre <footer>. Ils ne sont pas réservés au niveau de la page : chacun introduit ou conclut l'article ou la section la plus proche. L'élément <time datetime> donne la date sous une forme lisible par les machines tout en l'affichant sous une forme lisible par les humains.

Vérifier le plan de vos titres

Les titres sont l'autre moitié de la structure. Les utilisateurs de lecteurs d'écran parcourent souvent une page de titre en titre, donc les niveaux doivent se lire comme une table des matières sans niveau sauté. Ce script affiche le plan de la page dans laquelle il s'exécute :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

Le h4 sous « Brewing » saute un niveau. Changez-le en h3 et le plan se lit proprement. Choisissez les niveaux de titre selon la structure, et changez leur taille en CSS si vous les voulez plus grands ou plus petits.

D'autres balises sémantiques

La sémantique ne concerne pas que la mise en page. Ces balises de texte portent aussi un sens :

Balise	Signification
`<strong>`	Texte important (en gras par défaut)
`<em>`	Accentuation (en italique par défaut)
`<figure>` et `<figcaption>`	Une image, un graphique ou un exemple de code avec sa légende
`<time datetime="...">`	Une date ou une heure sous une forme lisible par les machines
`<address>`	Les coordonnées de l'auteur de la page ou de l'article
`<mark>`	Un texte surligné, comme un résultat de recherche
`<abbr title="...">`	Une abréviation avec sa forme complète
`<button>`	Un élément qui exécute une action

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Survolez l'abréviation « W3C » pour voir sa forme complète dans une infobulle.

Erreurs fréquentes

Utiliser une balise pour son apparence. <blockquote> sert aux citations, pas au retrait ; <h3> sert à un niveau de titre, pas à un texte en gras de taille moyenne. Stylisez en CSS.
Tout entourer de <section>. Une section doit avoir un titre et un thème. Si vous avez besoin d'une boîte pour le style, utilisez <div>.
Plus d'un <main> visible. Gardez-en un par page, et ne l'imbriquez jamais dans <article>, <aside>, <header>, <nav> ou <footer>.
Mettre chaque liste de liens dans <nav>. Réservez-le aux blocs de navigation principaux, comme le menu du site ou une table des matières. Quelques liens dans un pied de page n'en ont pas besoin.
Des éléments <div> cliquables. Une <div onclick> est inaccessible au clavier. Utilisez <button> pour les actions et <a href> pour la navigation.

Questions fréquentes

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

Le HTML sémantique est un balisage où chaque balise décrit le sens de son contenu : <nav> pour la navigation, <article> pour un contenu autonome, <button> pour un bouton. Le navigateur, les lecteurs d'écran et les moteurs de recherche peuvent alors comprendre la page sans deviner à partir des noms de classes ou des styles.

Quelles sont les balises sémantiques en HTML ?

Les balises de mise en page sont <header>, <nav>, <main>, <article>, <section>, <aside> et <footer>. Parmi les autres balises sémantiques courantes : <figure>, <figcaption>, <time>, <address>, <strong>, <em> et les titres <h1> à <h6>.

La div est-elle un élément sémantique ?

Non. <div> n'a aucune signification propre ; c'est une boîte générique pour le style et la mise en page. Utilisez-la quand aucune balise sémantique ne convient, et utilisez <header>, <main>, <nav> et les autres quand l'une d'elles convient.

À quoi sert la balise aside ?

<aside> contient un contenu lié au contenu principal sans faire partie de son déroulement : une barre latérale, un encadré de liens associés, une note de glossaire ou une citation mise en exergue. Au niveau de la page, les lecteurs d'écran la listent comme un repère complémentaire.

Combien d'éléments main une page peut-elle avoir ?

Un seul <main> visible par page. Il entoure le contenu propre à cette page, et il ne doit pas se trouver dans <header>, <nav>, <article>, <aside> ou <footer>.

Le HTML sémantique aide-t-il le SEO ?

Il aide les moteurs de recherche à comprendre quelle partie de la page est le contenu principal, laquelle est la navigation et comment les titres s'articulent. Ce n'est pas un raccourci de classement en soi, mais il supprime les suppositions et améliore l'accessibilité, ce qui vaut la peine de toute façon.

Concepts liés