Chapitre 1 · Leçon 2
Donner du sens à votre contenu avec les bonnes balises
Section 1
La sémantique, c'est choisir la balise qui correspond au sens du contenu, pas à son apparence.
Step 1
Avant HTML5, tout était des <div> et <span>. Le code était illisible pour les machines (moteurs de recherche, lecteurs d'écran). HTML5 a introduit des balises avec du sens.
avant.html
1<!-- ❌ Avant HTML5 : incompréhensible -->
2<div id="header">
3 <div class="nav">...</div>
4</div>
5<div id="main">
6 <div class="article">...</div>
7 <div class="sidebar">...</div>
8</div>
9<div id="footer">...</div>
10
11<!-- ✅ HTML5 sémantique -->
12<header>
13 <nav>...</nav>
14</header>
15<main>
16 <article>...</article>
17 <aside>...</aside>
18</main>
19<footer>...</footer>Step 2
HTML5 introduit des balises qui décrivent la fonction du contenu. Chacune a un rôle précis dans la page.
Section 2
Step 3
Les titres <h1> à <h6> définissent la hiérarchie du contenu. <h1> est unique par page. Ne saute jamais un niveau (pas de h3 après h1).
Step 4
<strong> et <em> ont du sens sémantique. <b> et <i> ne font que changer l'apparence. Pour le SEO et l'accessibilité, utilise toujours les versions sémantiques.