Remplacez vos div anonymes par des balises qui donnent du sens à votre structure.
Ouvrir cette leçon dans KodokonUne page construite uniquement avec des div fonctionne, mais elle ne dit rien : ni aux lecteurs d'écran, ni aux moteurs de recherche, ni au collègue qui reprendra votre code dans six mois. Les balises sémantiques décrivent le rôle de chaque zone : header, nav, main, article, section, footer.
<body>
<header>
<nav aria-label="Navigation principale">
<a href="/">Accueil</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Le blog des devs curieux</h1>
</main>
<footer>
<p>© 2026 Kodokon. Tous droits réservés.</p>
</footer>
</body>header regroupe l'en-tête (logo, navigation), footer les informations de clôture (mentions légales, liens secondaires). main contient le contenu principal et doit être unique sur la page. nav signale une zone de navigation : la navigation principale, un fil d'Ariane ou un sommaire.
La distinction la plus délicate : article contre section. Règle pratique : si le bloc a du sens sorti de son contexte (un billet de blog, un commentaire, une fiche produit), c'est un article. Si c'est un regroupement thématique à l'intérieur d'un contenu, avec son propre titre, c'est une section.
<main>
<article>
<h1>Comprendre le HTML sémantique</h1>
<section>
<h2>Accessibilité</h2>
<p>Les lecteurs d'écran s'appuient sur
la structure pour naviguer.</p>
</section>
<section>
<h2>Référencement</h2>
<p>Les moteurs comprennent mieux la page.</p>
</section>
</article>
</main>Exercice mental : sur une page produit e-commerce, comment baliser la liste des avis clients ? Chaque avis a un auteur, une date et un contenu qui se suffit à lui-même : chaque avis est donc un article, et le bloc « Avis clients » qui les regroupe, avec son titre, est une section.