Pourquoi le HTML sémantique ?
Avant HTML5, tout était construit avec des <div>. Des <div> partout : pour le menu, pour le contenu, pour le pied de page. Résultat ? Impossible de savoir ce qui était quoi juste en lisant le code.
Les balises sémantiques donnent du sens à la structure. Google comprend votre page, les lecteurs d'écran permettent aux personnes malvoyantes de naviguer, et les développeurs lisent le code plus facilement.
Pensez-y comme ça : un <div>, c'est une boîte sans étiquette. Un <nav>, c'est une boîte marquée « navigation ». Même contenu, mais tout le monde sait ce qu'il y a dedans.
Les 7 balises à connaître
<header>— en-tête de page ou de section (logo, titre, nav)<nav>— navigation principale (menu, liens de navigation)<main>— contenu principal de la page (un seul par page)<article>— contenu autonome (article de blog, commentaire, produit)<section>— regroupement thématique avec un titre<aside>— contenu secondaire (sidebar, encadré, publicité)<footer>— pied de page (copyright, liens légaux, contact)
Exemple complet : une page bien structurée
Voici comment ces balises s'imbriquent pour former une page complète :
<header>
<nav>...</nav>
</header>
<main>
<article>
<section>...</section>
<section>...</section>
</article>
<aside>...</aside>
</main>
<footer>...</footer>Chaque balise a un rôle clair. Pas besoin de deviner, pas besoin de lire les classes CSS pour comprendre la structure.
Why semantic HTML?
Before HTML5, everything was built with <div> tags. Divs everywhere: for the menu, for the content, for the footer. The result? Impossible to tell what was what just by reading the code.
Semantic tags give meaning to the structure. Google understands your page, screen readers let visually impaired people navigate, and developers read the code more easily.
Think of it this way: a <div> is an unlabeled box. A <nav> is a box labeled "navigation". Same content, but everyone knows what's inside.
The 7 tags you need to know
<header>— page or section header (logo, title, nav)<nav>— main navigation (menu, navigation links)<main>— main content of the page (only one per page)<article>— self-contained content (blog post, comment, product)<section>— thematic grouping with a heading<aside>— secondary content (sidebar, callout, ad)<footer>— page footer (copyright, legal links, contact)
Full example: a well-structured page
Here's how these tags nest together to form a complete page:
<header>
<nav>...</nav>
</header>
<main>
<article>
<section>...</section>
<section>...</section>
</article>
<aside>...</aside>
</main>
<footer>...</footer>Each tag has a clear role. No guessing needed, no reading CSS classes to understand the structure.
Copiez ce prompt dans Claude ou ChatGPT :
Prends ce code HTML et remplace tous les div par les bonnes balises sémantiques : [coller le code]. Explique chaque remplacement.
L'IA a généré une page en utilisant <div class="header">, <div class="nav">, <div class="main"> au lieu des vraies balises sémantiques. Remplacez chaque div par la bonne balise.
<main> peut-il y avoir par page ?<article> est utilisé pour :