HTML Semantique
Qu'est-ce que le HTML semantique ?
Le HTML semantique consiste a utiliser des balises qui ont un sens, plutot que des balises generiques comme <div>.
Analogie : Imaginez un livre sans titres, chapitres ni paragraphes - juste du texte. Ce serait difficile a lire ! Les balises semantiques jouent le role des titres et chapitres pour le navigateur.
Avant / Apres : div vs semantique
<!-- MAUVAIS -->
<div class="header">
<div class="logo">MonSite</div>
<div class="menu">
<div>Accueil</div>
</div>
</div>
<div class="contenu">
<div>...</div>
</div><!-- BON -->
<header>
<h1>MonSite</h1>
<nav>
<a>Accueil</a>
</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>Les balises semantiques principales
<header>En-tete de page ou de section
Logo, titre principal, navigation
<nav>Zone de navigation
Menu principal, liens de navigation
<main>Contenu principal unique
Un seul par page, contenu central
<article>Contenu independant
Article de blog, news, commentaire
<section>Section thematique
Chapitres, parties d'un document
<aside>Contenu complementaire
Sidebar, encarts, publicites
<footer>Pied de page ou de section
Copyright, liens, contacts
<figure>Contenu autonome illustratif
Images avec legende, graphiques
Schema d'une page semantique
<header><nav> Menu<main><article><section><aside><footer>Pourquoi utiliser le HTML semantique ?
Accessibilite
Les lecteurs d'ecran comprennent la structure de la page
SEO
Les moteurs de recherche indexent mieux le contenu
Maintenance
Le code est plus lisible et facile a maintenir
Standards
Respect des normes W3C et bonnes pratiques
Exemple complet : page de blog
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page semantique</title>
</head>
<body>
<header>
<h1>Mon Blog</h1>
<nav aria-label="Menu principal">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/articles">Articles</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Articles recents</h2>
<article>
<header>
<h3>Premier article</h3>
<time datetime="2024-01-15">15 janvier 2024</time>
</header>
<p>Contenu de l'article...</p>
</article>
</section>
<aside>
<h2>A propos</h2>
<p>Blog sur le dev web.</p>
</aside>
</main>
<footer>
<p>© 2024 Mon Blog</p>
</footer>
</body>
</html>Quiz : Teste tes connaissances
5 questions pour verifier ce que tu as appris sur le HTML semantique
A retenir
- Les balises semantiques donnent du sens au contenu
<header>,<nav>,<main>,<footer>structurent la page- Un seul
<main>par page ! - Avantages : accessibilite, SEO, lisibilite du code
