Balises sémantiques HTML5 : guide complet avec exemples
Comment le HTML sémantique clarifie la structure d’une page pour les humains et les machines, où il améliore l’accessibilité, et pourquoi ce n’est pas un raccourci pour le positionnement.
Avant HTML5, le web reposait surtout sur des div et des span, avec des classes CSS comme .header, .sidebar ou .footer. Les robots des moteurs de recherche et les lecteurs d’écran devaient deviner la fonction de chaque bloc. HTML5 a introduit les balises sémantiques : des éléments qui portent un sens par eux-mêmes, indépendamment du CSS. La balise <article> désigne un contenu autonome. La balise <nav> désigne la navigation. La balise <aside> désigne un contenu complémentaire, lié au contenu principal, mais non indispensable à sa compréhension.
Balises structurelles de la page
HTML5 a introduit un ensemble de balises pour délimiter les grandes zones de la page. Elles forment le squelette du document : les navigateurs, les moteurs de recherche et les technologies d’assistance peuvent le parcourir sans lire le CSS.
- <header>
- Contenu introductif du contexte de sectionnement le plus proche : la page ou une section. Au niveau de la page : l’en-tête du site, avec le logo, la navigation et la recherche. Dans <article> : le titre, les métadonnées et l’auteur. Plusieurs éléments <header> sont valides sur une même page, à condition d’appartenir à des sections différentes.
- <nav>
- Bloc de liens de navigation. Tous les ensembles de liens ne relèvent pas de <nav> : seuls les grands axes de navigation sont concernés, comme le menu principal, le fil d’Ariane ou la pagination. Les liens du pied de page vers la politique de confidentialité ne sont pas une <nav>. Les lecteurs d’écran utilisent <nav> pour proposer un raccourci clavier vers la navigation.
- <main>
- Le contenu principal et unique de la page. Une seule balise <main> par document. Le contenu de <main> ne doit pas se répéter d’une page à l’autre : en-têtes, pieds de page et barres latérales se répètent, ils restent donc en dehors de <main>. Les lecteurs d’écran accèdent directement à <main> grâce à un raccourci clavier.
- <footer>
- Le bloc de fin du contexte de sectionnement le plus proche. Au niveau de la page : contacts, droits d’auteur, liens. Dans <article> : informations sur l’auteur, étiquettes et date de dernière mise à jour. Comme <header>, il peut apparaître dans plusieurs sections.
- <article>
- Contenu autonome, diffusable indépendamment : article de blog, article d’actualité, message de forum, fiche produit ou commentaire. Test décisif : si l’on extrait le <article> de son contexte et qu’on le publie seul, a-t-il un sens ? Si oui, c’est un <article>.
- <section>
- Partie d’un document thématiquement cohérente, sans balise plus précise. Elle doit toujours comporter un titre (de <h2> à <h6>). Sans titre, un <div> est probablement le bon choix. N’utilisez pas <section> comme substitut stylé d’un <div>.
- <aside>
- Contenu lié de façon indirecte au contenu principal : encadrés, barres latérales, blocs publicitaires, biographies d’auteur, articles associés. Dans <article> : une note ou une citation non indispensable à la compréhension du texte principal. Au niveau de la page : une colonne latérale.
Voici le squelette de base d’une page. Ce balisage est déjà correct sur le plan sémantique :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<header>
<a href="/"><img src="logo.svg" alt="Company name"></a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contacts">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<!-- Unique page content -->
</main>
<footer>
<p>© 2026 Company name</p>
<nav aria-label="Secondary navigation">
<a href="/privacy">Privacy</a>
<a href="/sitemap">Sitemap</a>
</nav>
</footer>
</body>
</html>Balises de contenu : article, section, h1–h6, p
Les balises de structure délimitent les zones de la page. Les balises de contenu décrivent la nature du contenu lui-même. Voyons la combinaison que l’on retrouve sur chaque page de blog.
<!-- Blog post page -->
<main>
<article>
<header>
<h1>How to choose the right HTML tag</h1>
<p>Published: <time datetime="2026-05-22">22 May 2026</time></p>
<address>
By: <a rel="author" href="/authors/pavlo">seohead</a>
</address>
</header>
<section>
<h2>Why semantics matters</h2>
<p>Section text...</p>
</section>
<section>
<h2>Main tags</h2>
<p>Section text...</p>
<aside>
<p>Note: the HTML Living Standard is continuously updated.</p>
</aside>
</section>
<footer>
<p>Tags: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
</footer>
</article>
<!-- Related articles -->
<aside aria-label="Related articles">
<h2>Also read</h2>
<ul>
<li><a href="/blog/heading-structure">Heading structure</a></li>
<li><a href="/blog/schema-org-json-ld">Schema.org markup</a></li>
</ul>
</aside>
</main>Quand utiliser section plutôt que div
La règle est simple : si un bloc a un nom sémantique, utilisez <section>. S’il ne sert qu’à la mise en forme ou comme point d’accroche pour JavaScript, utilisez <div>.
<!-- CORRECT: section with a heading -->
<section>
<h2>Product benefits</h2>
<ul>
<li>Fast delivery</li>
<li>2-year warranty</li>
</ul>
</section>
<!-- CORRECT: div for styling -->
<div class="cards-grid">
<article>...</article>
<article>...</article>
<article>...</article>
</div>
<!-- WRONG: section with no heading -->
<section class="cards-grid">
<article>...</article>
</section>
<!-- WRONG: div where content has meaning -->
<div id="about">
<!-- The About section — this should be <section> -->
<h2>About us</h2>
<p>...</p>
</div>Balises de médias, de données et utilitaires
HTML5 a ajouté des balises pour des types de données précis. Elles donnent des signaux supplémentaires aux moteurs de recherche, sans nécessiter de balisage Schema.org.
<figure> et <figcaption>
Contenu autonome lié à un média, avec légende. Images, schémas, tableaux, extraits de code : tout élément lié au texte principal, qui pourrait être déplacé ou placé en annexe sans perdre son sens. <figcaption> est la légende officielle d’une <figure>. Google utilise <figcaption> comme description complémentaire lors de l’analyse des images.
<time>
Une date ou une heure lisible par une machine. L’attribut datetime au format ISO 8601 permet au moteur de recherche de déterminer avec précision la date de publication ou de l’événement, quelle que soit la façon dont elle est affichée à l’utilisateur. Google recommande explicitement d’utiliser <time> pour les dates d’article dans les données structurées de type Article.
<address>
Coordonnées de contact de l’<article> le plus proche, ou du document entier. Dans <article> : les coordonnées de l’auteur. Au niveau de la page : les coordonnées de l’organisation. N’utilisez pas <address> pour des adresses postales en dehors des coordonnées d’un auteur ou d’une organisation.
<details> et <summary>
Un widget repliable natif, sans JavaScript. <summary> est le titre visible, <details> contient le contenu masqué. Le navigateur gère seul l’ouverture et la fermeture. Les moteurs de recherche indexent le contenu de <details> même lorsqu’il est replié. Idéal pour les FAQ et les contenus à dévoiler.
<mark>
Met en évidence un texte comme pertinent dans le contexte actuel, par exemple dans des résultats de recherche ou pour des mots-clés dans une citation. Ne le confondez pas avec <strong> (importance) ni avec <em> (accentuation). <mark> signifie « signalé comme pertinent », et non « important » ni « mis en forme à des fins décoratives ».
<data> et <output>
<data value="42">Quarante-deux</data> relie un texte lisible par l’humain à une valeur lisible par une machine. <output> représente le résultat d’un calcul ou d’une action de l’utilisateur. Ces deux balises sont rares sur les sites éditoriaux, mais indispensables dans les applications web avec formulaires et calculateurs.
<!-- figure + figcaption for an image -->
<figure>
<img
src="/images/html5-structure.webp"
alt="Diagram of the semantic structure of an HTML5 page"
width="800" height="450"
>
<figcaption>Fig. 1 — Typical semantic structure of an HTML5 document</figcaption>
</figure>
<!-- figure + figcaption for code -->
<figure>
<pre><code class="language-html"><article>...</article></code></pre>
<figcaption>Example: minimal article markup</figcaption>
</figure>
<!-- time with datetime attribute -->
<p>
Article updated:
<time datetime="2026-05-22T10:30:00+03:00">22 May 2026</time>
</p>
<!-- details + summary (FAQ without JS) -->
<details>
<summary>What is semantic HTML?</summary>
<p>Markup where each tag conveys the meaning of the content,
not just its visual appearance.</p>
</details>
<!-- mark for search highlighting -->
<p>Results for "<mark>semantic tags</mark>" — 42 articles</p>Imbrication et combinaisons : exemples concrets
La puissance sémantique de HTML5 ne tient pas aux balises prises isolément, mais à leur bonne combinaison. Voici quelques architectures de page typiques.
Page listant les articles du blog
<main>
<header>
<h1>SEO blog</h1>
<p>Practical articles on website promotion</p>
</header>
<!-- Article list — each card is an article -->
<section aria-label="Article list">
<article>
<header>
<h2><a href="/blog/semantic-html5">HTML5 semantic tags</a></h2>
<p>
<time datetime="2026-05-22">22 May 2026</time>
· <span>18 min read</span>
</p>
</header>
<p>HTML5 semantic tags are the foundation of correct page markup...</p>
<footer>
<a href="/blog/semantic-html5">Read more</a>
</footer>
</article>
<article>
<header>
<h2><a href="/blog/heading-structure">Heading structure</a></h2>
<p>
<time datetime="2026-04-10">10 April 2026</time>
· <span>12 min read</span>
</p>
</header>
<p>One H1 per page. H2 divides content into sections...</p>
<footer>
<a href="/blog/heading-structure">Read more</a>
</footer>
</article>
</section>
<!-- Pagination -->
<nav aria-label="Pagination">
<a href="?page=1" aria-current="page">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
</nav>
</main>Fiche produit avec avis
<main>
<article itemscope itemtype="https://schema.org/Product">
<!-- Product main area -->
<header>
<h1 itemprop="name">SoundMax Pro Wireless Headphones</h1>
<p itemprop="description">40 hours of battery life, active noise cancellation...</p>
</header>
<!-- Product image -->
<figure>
<img
src="/products/soundmax-pro.webp"
alt="SoundMax Pro wireless headphones — front view"
itemprop="image"
width="600" height="600"
>
<figcaption>SoundMax Pro in three colours: black, white, blue</figcaption>
</figure>
<!-- Price -->
<section aria-label="Price and purchase">
<p>
<data value="129" itemprop="price">$129</data>
</p>
<button type="button">Add to cart</button>
</section>
<!-- Specs -->
<section>
<h2>Specifications</h2>
<dl>
<dt>Battery life</dt><dd>40 hours</dd>
<dt>Connection</dt><dd>Bluetooth 5.3</dd>
<dt>Weight</dt><dd>250 g</dd>
</dl>
</section>
<!-- Reviews — each review is an article inside article -->
<section aria-label="Customer reviews">
<h2>Reviews</h2>
<article>
<header>
<strong>Anna K.</strong>
<time datetime="2026-04-15">15 April 2026</time>
</header>
<p>Excellent headphones, clean sound. The noise cancellation works brilliantly.</p>
</article>
<article>
<header>
<strong>Michael R.</strong>
<time datetime="2026-03-28">28 March 2026</time>
</header>
<p>The 40-hour claim is real. Took them on a business trip and they lasted the week.</p>
</article>
</section>
</article>
</main>Page de destination avec sections et barre latérale
<body>
<header>
<nav aria-label="Main navigation">
<!-- logo + menu -->
</nav>
</header>
<main>
<!-- Hero section -->
<section aria-labelledby="hero-title">
<h1 id="hero-title">SEO promotion for your business</h1>
<p>We help businesses improve technical and content foundations</p>
<a href="#contacts" role="button">Get a free audit</a>
</section>
<!-- Services -->
<section>
<h2>Our services</h2>
<ul role="list">
<li>
<article>
<h3>Technical audit</h3>
<p>Full technical health check of your site...</p>
</article>
</li>
<li>
<article>
<h3>Content strategy</h3>
<p>Keyword universe and content calendar...</p>
</article>
</li>
</ul>
</section>
<!-- Main content + sidebar -->
<div class="layout-two-col">
<section>
<h2>Case studies</h2>
<!-- ... -->
</section>
<aside aria-label="Contact us">
<h2>Get in touch</h2>
<address>
<p>Email: <a href="mailto:hello@seohead.tech">hello@seohead.tech</a></p>
<p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
</address>
</aside>
</div>
</main>
<footer>
<nav aria-label="Site map">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/glossary">Glossary</a></li>
</ul>
</nav>
<p><small>© 2026 seohead.tech</small></p>
</footer>
</body>Plusieurs éléments <nav> : fil d’Ariane et pagination
<!-- Multiple <nav> elements are fine — distinguish them with aria-label -->
<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">HTML5 semantic tags</li>
</ol>
</nav>
<!-- Main navigation inside <header> -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog" aria-current="page">Blog</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
<!-- Pagination at the end of a listing -->
<nav aria-label="Blog pages">
<a href="?page=1" rel="prev" aria-label="Previous page">←</a>
<a href="?page=1">1</a>
<span aria-current="page">2</span>
<a href="?page=3">3</a>
<a href="?page=3" rel="next" aria-label="Next page">→</a>
</nav>
<!-- In-page table of contents -->
<nav aria-label="Article contents">
<ol>
<li><a href="#structural-tags">Structural tags</a></li>
<li><a href="#content-tags">Content tags</a></li>
<li><a href="#nesting-examples">Nesting examples</a></li>
</ol>
</nav>Impact SEO : ce que reçoit réellement le moteur de recherche
Le balisage sémantique donne aux navigateurs et aux technologies d’assistance des informations structurelles plus claires. Il peut rendre la page plus facile à interpréter et à maintenir, mais ce n’est pas un levier de positionnement direct, ni un substitut à un contenu utile.
Identifier le contenu principal
Google utilise <main> pour repérer le contenu principal d’une page. Le contenu de l’en-tête, du pied de page et de <aside> reçoit moins de poids dans le classement. Si tout le texte se trouve dans <div class="main">, Google consacre davantage de ressources à déduire la structure.
Attribution de la date et de l’auteur
<time datetime="2026-05-22"> donne à Google une date de publication précise, qui influence l’évaluation de la fraîcheur du contenu. <address> avec rel="author" relie l’article à son auteur. Ces deux signaux alimentent la production des résultats enrichis affichés dans la recherche.
Résultats enrichis
Le contenu de <details> + <summary> est indexé par Google et peut apparaître sous forme de blocs dépliables dans les résultats de recherche (People Also Ask). <figure> + <figcaption> influencent l’indexation des images et leur affichage dans Google Images.
Maillage interne
Les liens placés dans <nav> ont un contexte de navigation. Les liens placés dans <article> ont un contexte de contenu. Googlebot tient compte de la position d’un lien dans la page pour en évaluer le poids. Un lien situé dans le corps d’un <article> vaut davantage qu’un lien placé dans un <aside>.
Erreurs courantes dans le balisage sémantique
La plupart des erreurs viennent d’un réflexe « tout en div » ou d’une méprise sur le rôle réel d’une balise.
<!-- MISTAKE 1: <section> instead of <div> for styling -->
<section class="flex-wrapper"> <!-- no heading = not section -->
<img src="photo.jpg" alt="">
</section>
<!-- CORRECT -->
<div class="flex-wrapper">
<img src="photo.jpg" alt="Photo description">
</div>
<!-- MISTAKE 2: <article> for a card without standalone meaning -->
<article class="feature-card">
<span class="icon">⚡</span>
<h3>Fast delivery</h3>
</article>
<!-- CORRECT: a benefits card is li or div, not article -->
<li class="feature-card">
<span class="icon" aria-hidden="true">⚡</span>
<h3>Fast delivery</h3>
</li>
<!-- MISTAKE 3: <header> as a synonym for <div class="header"> -->
<header class="section-header">
<h2>Our advantages</h2>
</header>
<!-- CORRECT: use <header> only when a section has an introductory group -->
<section>
<h2>Our advantages</h2> <!-- h2 directly, no header wrapper -->
...
</section>
<!-- MISTAKE 4: two <main> elements -->
<main>Primary content</main>
<main>Also important content</main> <!-- invalid! -->
<!-- CORRECT: one <main>, supplementary content in <aside> -->
<main>Primary content</main>
<aside>Supplementary content</aside>
<!-- MISTAKE 5: <address> for an office address in body text -->
<address>1 High Street, London</address> <!-- not in an author/org context -->
<!-- CORRECT -->
<p>Office address: 1 High Street, London</p>
<!-- or in footer as site contact information: -->
<footer>
<address>
<a href="mailto:hello@company.com">hello@company.com</a>
</address>
</footer>Autre problème fréquent : les attributs alt absents ou vides. Les images placées dans <figure> doivent avoir soit un alt pertinent, soit alt="" (si l’image est décorative et décrite par <figcaption>). Ne jamais omettre totalement l’attribut alt : cela enfreint les règles d’accessibilité et la validation HTML.
<!-- Decorative image: empty alt, figcaption describes it -->
<figure>
<img src="chart.png" alt="" role="presentation">
<figcaption>Organic traffic growth over 6 months: +340%</figcaption>
</figure>
<!-- Informative image: full alt text -->
<figure>
<img
src="html5-tags-map.png"
alt="Map of HTML5 semantic tags: header, nav, main, article, section, aside, footer"
>
<figcaption>Fig. 2 — Complete map of HTML5 semantic elements</figcaption>
</figure>
<!-- Mistake: no alt at all -->
<img src="diagram.png"> <!-- invalid! -->FAQ
Le balisage sémantique influence-t-il directement le classement sur Google ?
Peut-on imbriquer un <article> dans un <article> ?
En quoi <strong> diffère-t-il de <b>, et <em> de <i> ?
Faut-il ajouter role="main" en plus de la balise <main> ?
Qu’en est-il des applications monopages (SPA) en React ou Vue ?
Check it with SpiderHead
Free and local: run the audit on your own machine.
