Structure sémantique
Balises sémantiques : header, nav, main, section, article, aside, footer…
HTML5 apporte des balises qui donnent du sens au contenu (pas juste du style). Utilise-les quand c’est logique : tu gagnes en clarté, en accessibilité et en SEO.
<header>: en-tête de la page ou d’une section (logo, titre, intro)<nav>: navigation principale (liens importants)<main>: contenu principal (unique par page)<section>: grande partie thématique (un “chapitre”)<article>: contenu autonome (post, fiche, carte d’info)<aside>: complément (infos secondaires, encarts)<footer>: pied de page (crédits, liens légaux, contact)
HTMLhtml
<header>
<h1>Mon superbe site</h1>
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="intro">
<section>
<h2>Présentation rapide</h2>
<p>Ici, tu mets l’essentiel. Clair, net, précis.</p>
</section>
<section id="articles">
<article>
<h3>Fiche #1</h3>
<p>Un contenu autonome qui peut vivre tout seul.</p>
</article>
<article>
<h3>Fiche #2</h3>
<p>Même idée, autre sujet.</p>
</article>
</section>
</main>
<aside>
<p>Astuce du jour : nomme tes sections comme si tu faisais un sommaire.</p>
</aside>
<footer id="contact">
<p>
© Ton Nom - Mentions légales -
<a href="mailto:contact@site.com">Contact</a>
</p>
</footer>Conseils rapides
- Un seul
<main>par page (promis, ça suffit). <section>et<article>doivent avoir un titre logique (<h2>,<h3>…).- N’abuse pas de
<div>quand une balise sémantique existe. Le “div-div” n’est pas un sport olympique.