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.
Sans relire la réponse de l'IA : avec tes mots, comment décides-tu si un bloc doit être un <div> ou une balise sémantique (<nav>, <article>, etc.) ?
<nav>, contenu autonome → <article>, contenu principal unique → <main>). Le <div> reste le dernier recours : un simple conteneur neutre pour grouper ou positionner, quand aucune balise sémantique ne correspond. Le bénéfice n'est pas visuel (le rendu est identique) mais lisible par Google, les lecteurs d'écran et les autres devs.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.
L'IA te propose ce menu de navigation. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
<div class="nav">
<span class="lien" onclick="go('/')">Accueil</span>
<span class="lien" onclick="go('/blog')">Blog</span>
</div><nav>, pas un <div class="nav"> ; et surtout, des <span> cliquables ne sont pas des liens. Un vrai <a href> est focusable au clavier, annoncé comme lien par les lecteurs d'écran, ouvrable dans un nouvel onglet et suivi par Google. Le bon code : <nav> avec des <a href="/">. Réécrire des comportements natifs en JS est un classique de code généré : refuse-le.Sans remonter dans la leçon : qu'apporte une balise sémantique qu'un <div> n'apporte pas, et peux-tu citer trois balises sémantiques avec leur rôle ?
<div> neutre ne fait pas : Google comprend mieux la page (SEO) et les lecteurs d'écran peuvent naviguer par zones. Trois exemples : <nav> (navigation), <main> (contenu principal unique, un seul par page), <article> (contenu autonome qui a du sens seul). Le rendu visuel, lui, reste identique au <div>.<main> peut-il y avoir par page ?<article> est utilisé pour :Your semantic tags give meaning to the page. What's missing is interaction with the visitor: the next lesson dives into forms, input fields, buttons and everything that lets you collect information from your users.
Lesson 7: Forms →