Apprends à utiliser les éléments sémantiques comme header, nav, main, article, aside et footer pour créer des pages web bien structurées et accessibles.
Le HTML sémantique signifie utiliser des éléments HTML qui décrivent clairement leur signification et leur objectif, plutôt que d'utiliser des conteneurs génériques comme <div> et <span> pour tout.
Compare ces deux approches :
<!-- Non-sémantique -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- Sémantique -->
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>Les deux produisent le même résultat visuel, mais la version sémantique communique l'objectif de chaque section aux navigateurs, lecteurs d'écran et moteurs de recherche. Cela compte pour trois raisons importantes :
HTML5 a introduit plusieurs éléments pour définir les grandes régions d'une page :
<header> — Contenu introductif, contenant généralement un logo, le titre du site et la navigation. Une page peut avoir plusieurs headers (un pour la page, d'autres à l'intérieur d'articles ou de sections).
<nav> — Une section contenant des liens de navigation. Utilise-le pour la navigation principale du site, pas pour chaque groupe de liens sur la page.
<main> — Le contenu dominant de la page. Il ne devrait y avoir qu'un seul <main> par page, et il ne devrait pas être imbriqué dans header, nav, footer, article ou aside.
<footer> — Contenu de fermeture pour son ancêtre de section le plus proche. Contient généralement des informations de copyright, des coordonnées ou des liens connexes. Comme header, une page peut avoir plusieurs footers.
<header>
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Understanding Semantic HTML</h2>
<p>Semantic elements describe the role of content
rather than its appearance...</p>
</article>
<aside>
<h3>Related Topics</h3>
<ul>
<li><a href="/css">CSS Basics</a></li>
<li><a href="/a11y">Accessibility</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>Trois éléments sémantiques supplémentaires t'aident à organiser le contenu de la page :
<article> — Un contenu autonome qui pourrait se suffire à lui-même et avoir toujours du sens. Les articles de blog, articles de presse, messages de forum et cartes de produits sont tous de bons candidats pour <article>. Chaque article devrait généralement avoir son propre titre.
<section> — Un regroupement thématique de contenu, généralement avec un titre. Utilise section pour diviser une longue page en parties logiques (par exemple, "À propos", "Nos Services", "Témoignages"). Si le contenu est autonome et distribuable indépendamment, préfère <article> à la place.
<aside> — Contenu qui est tangentiellement lié au contenu environnant. Les barres latérales, citations en exergue, liens connexes et publicités sont des usages courants. Le aside n'est pas l'objectif principal mais fournit des informations supplémentaires.
Une façon pratique de décider : si tu pouvais retirer le contenu et que le contenu principal aurait toujours un sens complet, il appartient probablement à un <aside>. Si le contenu est une pièce complète et indépendante, utilise <article>. S'il s'agit d'une subdivision logique d'un ensemble plus large, utilise <section>.
Combien d'éléments <main> une page devrait-elle avoir ?