Comment utiliser la balise <main> ?
La balise <main> en HTML5 est utilisée pour définir le contenu principal et unique d’une page web. Elle aide à structurer un document de manière sémantique, ce qui est bénéfique pour l’accessibilité (notamment pour les lecteurs d’écran) et le référencement (SEO – Search Engine Optimization, ou référencement naturel).
La balise <main> doit contenir uniquement le contenu principal de ta page.
Elle ne doit pas inclure :
- Les en-têtes (
<header>), - Les pieds de page (
<footer>), - Les barres de navigation (
<nav>), - Les barres latérales (
<aside>).
Il ne doit y avoir qu’une seule balise <main> dans une page HTML.
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Page</title>
</head>
<body>
<header>
<h1>Titre de la page</h1>
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/about">À propos</a></li>
</ul>
</nav>
</header>
<!-- Contenu principal de la page -->
<main>
<h2>Bienvenue sur mon site</h2>
<p>Ceci est le contenu principal de la page.</p>
<article>
<h3>Article 1</h3>
<p>Texte de l'article...</p>
</article>
</main>
<!-- Fin du contenu principal de la page -->
<footer>
<p>© 2026 Mon Site. Tous droits réservés.</p>
</footer>
</body>
</html>Accessibilité et SEO
- Accessibilité : Les lecteurs d’écran utilisent
<main>pour identifier et accéder rapidement au contenu principal, ce qui améliore l’expérience des utilisateurs handicapés. - SEO : Les moteurs de recherche comme Google accordent une importance particulière au contenu dans
<main>, car il représente le cœur de la page.
Différence avec <div id="main">
<main>est sémantique : elle indique clairement aux navigateurs et aux outils d’assistance que son contenu est le principal.<div id="main">est non sémantique : c’est une simple division sans signification particulière.