Qu’est-ce que le HTML sémantique ?
Le HTML sémantique consiste à choisir des éléments qui décrivent ce qu’est le contenu, et non son apparence. Un <nav> est un bloc de navigation. Un <article> est un contenu autonome. Un <button> effectue une action. Ces éléments portent une signification que les navigateurs, les technologies d’assistance et les moteurs de recherche peuvent exploiter.
L’alternative est une page construite à partir d’éléments <div> et <span> génériques, ce que l’on appelle souvent la “div soup”. Le résultat peut être identique à l’écran, tout en étant opaque pour un lecteur d’écran et plus difficile à maintenir. La sémantique ne coûte rien et s’avère payante partout.
Landmarks
Les éléments de landmark définissent les régions principales d’une page et permettent aux utilisateurs de naviguer rapidement entre elles.
<!-- layout.html -->
<body>
<header>
<a href="/">hackweb</a>
<nav aria-label="Main">
<a href="/guides">Guides</a>
</nav>
</header>
<main>
<h1>Guides</h1>
</main>
<footer>
<p>© 2026 hackweb.dev</p>
</footer>
</body>- header — contenu introductif de la page ou d’une section.
- nav — un bloc de liens de navigation. Étiquetez les navs répétées avec
aria-label. - main — le contenu principal, utilisé une seule fois et accessible via les raccourcis des lecteurs d’écran.
- aside — contenu tangentiellement lié au contenu principal.
- footer — contenu de clôture tel que le copyright ou des liens connexes.
Les utilisateurs de lecteurs d’écran peuvent lister et sauter d’un landmark à l’autre, ce qui transforme une page longue en une structure navigable.
Titres
Les titres constituent le plan de la page. Utilisez un seul <h1> pour le sujet principal, puis des <h2> et <h3> pour les sections et sous-sections.
<!-- outline.html -->
<h1>CSS Grid</h1>
<h2>Tracks and lines</h2>
<h3>Defining columns</h3>
<h3>Placing items</h3>
<h2>Responsive grids</h2>Ne choisissez jamais un niveau de titre en fonction de sa taille. Utilisez le CSS pour l’apparence et les titres pour la structure. Sauter des niveaux, comme passer directement du h1 au h4, rend le plan confus pour les technologies d’assistance.
Éléments de contenu
Au-delà des landmarks, HTML propose des éléments pour des types de contenus spécifiques.
- article — un contenu autonome qui pourrait être publié indépendamment, comme un article de blog ou un commentaire.
- section — un groupe thématique, généralement accompagné d’un titre.
- figure et figcaption — un média accompagné d’une légende.
- blockquote et cite — une citation et sa source.
- time — une date ou une heure avec un
datetimelisible par une machine. - address — des informations de contact.
- ul, ol, dl — des listes non ordonnées, ordonnées et des listes de description.
<!-- post.html -->
<article>
<h1>What is DNS?</h1>
<p><time datetime="2026-09-15">September 15, 2026</time></p>
<figure>
<img src="/dns.svg" alt="A DNS lookup walks the name hierarchy" width="800" height="400" />
<figcaption>Resolving a name step by step.</figcaption>
</figure>
<blockquote cite="https://example.com">
<p>DNS is the internet's phone book.</p>
</blockquote>
</article>L’utilisation de l’élément approprié vous permet de bénéficier du comportement par défaut et de la sémantique corrects, sans effort supplémentaire.
Liens versus boutons
C’est l’erreur sémantique la plus courante.
- Utilisez
<a href>pour la navigation vers une URL. Cela permet le clic droit, l’ouverture dans un nouvel onglet, la mise en favoris et l’activation au clavier. - Utilisez
<button>pour les actions qui modifient un état ou soumettent des données. Il est focalisable, utilisable au clavier et annoncé comme un bouton.
<!-- controls.html -->
<a href="/guides/css">Read the CSS guide</a>
<button type="button" onclick="toggleMenu()">Toggle menu</button>Un <div onclick="..."> a l’air cliquable mais n’est pas accessible au clavier, n’est pas annoncé comme un contrôle et n’est pas focalisable. Le corriger nécessite de recréer manuellement tout ce que le bouton vous offre nativement.
Formulaires et tableaux
Les formulaires possèdent leur propre sémantique : <form>, <label>, <fieldset>, <legend>, <input>, <select> et <textarea>. Chaque champ de saisie doit avoir un label, et le regroupement des contrôles associés avec fieldset et legend facilite l’utilisation pour tous. Le guide Formulaires & Validation approfondit ce sujet.
Les tableaux sont destinés aux données tabulaires, et non à la mise en page. Utilisez <table>, <thead>, <tbody>, <th> avec scope et <caption> afin que la relation entre les cellules et les en-têtes soit claire.
Quand utiliser une div
Les éléments génériques ne sont pas un péché. Utilisez <div> et <span> lorsque vous avez réellement besoin d’un conteneur pour le style ou la mise en page, sans signification sémantique. La règle est simple : privilégiez un élément sémantique quand il en existe un, et utilisez une div quand aucun ne convient. Ajouter section sans titre ou nav autour d’un seul lien sans rapport ajoute du bruit plutôt que du sens.
Bonnes pratiques
- Utilisez un seul
h1et respectez l’ordre des niveaux de titres. - Structurez vos pages avec header, nav, main et footer.
- Utilisez article et section pour le contenu, et non div.
- Privilégiez button pour les actions et les ancres pour la navigation.
- Donnez à chaque image un texte
altsignificatif, oualt=""si elle est décorative. - Étiquetez les contrôles de formulaire et groupez ceux qui sont liés.
- Validez votre HTML pour éviter que le parseur n’ait à effectuer de corrections.
Erreurs courantes
- Tout construire avec des divs et des spans.
- Utiliser une div avec un onclick au lieu d’un bouton.
- Choisir le niveau des titres en fonction de la taille de la police.
- Utiliser plusieurs éléments h1 sans sujet principal clairement défini.
- Utiliser des tableaux pour la mise en page.
- Envelopper un lien unique dans un nav, ou utiliser un section sans titre.
Et après ?
La sémantique est le fondement d’une page accessible et facile à trouver. Appuyez-vous sur les bases du HTML, rendez-la inclusive grâce au guide d’accessibilité, optimisez-la avec les bases du SEO, et complétez le tableau avec les formulaires et la validation.