Chargement...
Éléments sémantiques HTML
Après div et class/id, le sémantique nomme les régions par sens.
Le sens avant les boîtes
Le CSS stylise n’importe quelle balise ; la sémantique documente l’intention.
Réponse directe
Landmarks quand le sens correspond. Un main. Pas tout le site dans un article.
📊 Core landmarks
| Element | Typical meaning |
|---|---|
| header | Introductory or banner content for a page or section |
| nav | Major navigation links |
| main | Dominant unique content of this page |
| article | Independent composition (post, story, card that could stand alone) |
| section | Thematic grouping, usually with a heading |
| aside | Side note related to the surrounding content |
| footer | Closing content for a page or section |
Squelette simple
En-tête et liens, main pour le contenu unique, footer pour clôturer.
Simple semantic skeleton
html
HTML Code
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>Lire le squelette
- header souvent avec nav
- un main
- footer clôt
article, section et aside
Dans main : pièce autonome, blocs thématiques, note latérale.
Article section and aside
html
HTML Code
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>Lire le second démo
- article peut tenir seul
- section avec titre
- aside n’est pas un second main
Landmark vs div
Rôle standard ? landmark. Simple wrapper de mise en page ? div.
Pratique
- header/nav/main/footer
- contenu seulement dans main
- un article
- un seul main
Erreurs fréquentes
- plusieurs main
- section sans thème
- landmarks au hasard
Résumé
- La sémantique nomme le sens
- un main
- landmark si le rôle convient
🧠 Testez Vos Connaissances
Prêt à Commencer
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
6
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut