Structure sémantique
Découper sa page en grandes zones qui ont du sens : en-tête, navigation, contenu principal, pied de page…
Les boîtes neutres : div et span
Elles ne veulent rien dire : elles servent juste à regrouper des éléments pour les styler en CSS.
<div>
Bloc : prend toute la largeur, va à la ligne.
<span>
En ligne : reste dans le texte.
Les balises sémantiques
Pour les grandes zones, on préfère des balises qui disent ce qu'elles contiennent. (Le CSS caché ici affiche le nom de chaque balise.)
| Balise | Rôle |
|---|---|
<header> | En-tête : logo, titre, navigation |
<nav> | Menu de navigation principal |
<main> | Contenu principal (un seul par page) |
<article> | Contenu autonome : article, post, fiche produit |
<section> | Partie thématique, avec un titre |
<aside> | Contenu annexe : encadré, pub, liens liés |
<footer> | Pied de page : copyright, contacts |
Pourquoi c'est utile ? Les lecteurs d'écran permettent de sauter directement au
main ou au nav, les moteurs de recherche comprennent mieux ta page, et ton code est plus lisible.Un encadré « Articles populaires » à côté du contenu principal, c'est plutôt…
<footer><nav><aside>
C'est un contenu annexe, lié au sujet mais pas indispensable : aside.
À toi de jouer
Adieu la soupe de div
Remplace chaque div par la balise sémantique qui correspond à sa classe (et supprime la classe).
Indice
La classe de chaquediv indique la balise à utiliser : <div class="header"> devient <header>.Indice
Remplace aussi la balise fermante :</div> → </header>. L’indentation t’aide à savoir quelle fermeture va avec quelle ouverture.Indice
La structure attendue :<header>
<h1>...</h1>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>La carte d'article
Crée un article contenant :
- un titre
h2; - une date
<time datetime="2026-03-14">14 mars 2026</time>; - un paragraphe de résumé ;
- un
footer(dans l'article) avec un lien « Lire la suite ».
Indice
Tout doit être à l’intérieur de<article> … </article>.Indice
Tu peux recopier la balisetime de la consigne telle quelle. Le footer va lui aussi dans l’article, à la fin.Indice
Le squelette de la carte :<article>
<h2>Un titre</h2>
<time datetime="2026-03-14">14 mars 2026</time>
<p>Un résumé...</p>
<footer><a href="#">Lire la suite</a></footer>
</article>À retenir
div(bloc) etspan(en ligne) n'ont aucun sens : pour le style uniquement.- Squelette type :
header(+nav) →main(article,section,aside) →footer. - Une page bien structurée est plus accessible et mieux référencée.