HTML sémantique : 10 erreurs courantes à éviter (et les bonnes balises à utiliser)

Une page HTML peut s’afficher parfaitement et être mal écrite. Des div partout, du gras posé avec b, des titres choisis pour leur taille : le navigateur affiche tout sans se plaindre, mais les lecteurs d’écran, les moteurs de recherche et vos collègues perdent l’information que les balises étaient censées porter. C’est ce qu’on appelle le HTML sémantique : utiliser la balise qui dit ce qu’est le contenu, pas seulement comment il doit ressembler. Voici les dix erreurs les plus courantes et leur correction.

Pourquoi la sémantique compte

• Accessibilité. Un lecteur d’écran propose de sauter directement à la navigation, au contenu principal ou au pied de page. Il ne peut le faire que si nav, main et footer existent. Avec des div, l’utilisateur entend une page plate.
• Référencement. Les moteurs s’appuient sur la structure pour identifier le contenu principal, les titres et les relations entre sections. Une hiérarchie propre est comprise du premier coup, une soupe de div doit être devinée.
• Maintenance. <nav> se lit sans commentaire, <div class="nv2"> demande d’ouvrir le CSS. Le code sémantique se relit six mois plus tard.
• Comportements gratuits. Un button se déclenche au clavier, un a s’ouvre dans un nouvel onglet au clic molette, un label agrandit la zone cliquable d’une case à cocher. Autant de choses à recoder à la main si l’on triche avec des div.

Erreur 1 : des div à la place de header, nav, main et footer

La structure d’une page a des balises dédiées. Une div avec un identifiant header n’en est pas une pour le navigateur.

Ne faites pas cela :

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Faites cela :

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Chacune de ces balises porte un rôle implicite (banner, navigation, main, contentinfo) que les technologies d’assistance reconnaissent. main doit être unique sur la page, header et footer peuvent se répéter à l’intérieur d’un article.

Erreur 2 : une légende d’image dans un paragraphe

Une image et son texte de légende forment une unité. La balise figure les associe, figcaption porte la légende.

Ne faites pas cela :

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Faites cela :

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure convient aussi à un bloc de code, un graphique ou une citation accompagnés d’une légende.

Erreur 3 : b et i pour insister

b et i décrivent une apparence. strong et em décrivent une intention : importance forte, accent mis sur un mot. Un lecteur d’écran peut changer d’intonation sur em, jamais sur i.

Ne faites pas cela :

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Faites cela :

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b et i ne sont pas interdits : ils gardent un usage précis, un mot-clé mis en évidence sans importance particulière pour b, un terme étranger ou un nom de bateau pour i. Si vous voulez seulement du gras décoratif, c’est du CSS : font-weight: 700.

Erreur 4 : une hiérarchie de titres cassée

Les balises h1 à h6 forment le plan du document. Choisir un h4 parce qu’il a « la bonne taille » brise ce plan : les lecteurs d’écran naviguent de titre en titre, les moteurs en déduisent la structure.

Ne faites pas cela :

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Faites cela :

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Un seul h1 par page, pas de niveau sauté, et la taille se règle en CSS. Si un titre doit être petit visuellement, c’est h2 { font-size: 1.1rem }, pas h5.

Erreur 5 : section et article confondus, ou utilisés pour tout

article désigne un contenu autonome, qui garderait son sens sorti de la page : un billet de blog, un commentaire, une fiche produit. section regroupe un contenu thématique à l’intérieur d’un ensemble, et devrait toujours avoir un titre. Une div reste le bon choix pour un simple regroupement de mise en page.

Ne faites pas cela :

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Faites cela :

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Erreur 6 : un lien qui fait office de bouton, et inversement

Un lien (a) mène quelque part. Un bouton (button) déclenche une action : envoyer, ouvrir un menu, afficher une fenêtre. Un a href="#" avec un gestionnaire de clic n’est ni l’un ni l’autre, et une div cliquable n’est accessible ni au clavier ni aux lecteurs d’écran.

Ne faites pas cela :

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Faites cela :

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="/tarifs/">Voir les tarifs</a>

Le button natif réagit à Entrée et à Espace, reçoit le focus au clavier et annonce son rôle. Tout cela est perdu avec une div.

Erreur 7 : des liens qui disent « cliquez ici »

Le texte d’un lien doit annoncer sa destination, seul : les lecteurs d’écran proposent la liste des liens de la page hors contexte, et les moteurs utilisent l’ancre pour qualifier la page cible.

Ne faites pas cela :

Pour nos tarifs, <a href="/tarifs/">cliquez ici</a>.

Faites cela :

Consultez <a href="/tarifs/">nos tarifs 2026</a>.

Erreur 8 : des images sans alt

L’attribut alt décrit l’image pour qui ne la voit pas : lecteur d’écran, image non chargée, moteur de recherche. Il est obligatoire. Une image purement décorative porte un alt vide, pas absent.

Ne faites pas cela :

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Faites cela :

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

Le nom du fichier n’est jamais une description. Décrivez ce que l’image apporte au propos.

Erreur 9 : des champs de formulaire sans label

Un texte posé à côté d’un champ n’est pas relié à lui. La balise label, associée par for et id, annonce le champ au lecteur d’écran et rend le texte cliquable pour donner le focus.

Ne faites pas cela :

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Faites cela :

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

Le placeholder ne remplace pas le label : il disparaît à la saisie et son contraste est souvent insuffisant. D’autres bonnes pratiques pour les formulaires HTML complètent celle-ci.

Erreur 10 : des styles en ligne et des listes simulées

Deux mauvaises habitudes qui mélangent structure et présentation. Le style en ligne empêche de faire évoluer l’apparence sans toucher au HTML, la liste simulée avec des tirets et des br n’est pas une liste pour le navigateur, qui ne peut ni l’annoncer ni la compter.

Ne faites pas cela :

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Faites cela :

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Vérifier son HTML

Trois contrôles rapides, dans l’ordre :

1. Le validateur du W3C signale les balises mal fermées, les attributs inconnus et les alt manquants.
2. L’onglet Accessibilité des outils de développement (Chrome, Firefox) affiche l’arbre tel qu’un lecteur d’écran le perçoit : si vos header, nav et main y apparaissent comme régions, la structure est bonne.
3. La navigation au clavier : tabulez dans la page. Tout ce qui est cliquable doit recevoir le focus, dans un ordre logique. Une div cliquable échoue ici.

Pour la liste complète des balises de structure et de contenu, voyez 20 balises HTML5 à connaître. Et une fois la page structurée, le CSS prend le relais, par exemple pour centrer les éléments sans toucher au HTML.