Le HTML sémantique : coder pour les humains avant tout

le 14/05/2025 par Damien Schaller

Tags: Software Engineering, Bonne Pratique, Web, Front

Le HTML sémantique : écrire du code qui a du sens

Quand on pense à HTML, on pense souvent aux balises classiques : <div>, <span>, <p>. Elles fonctionnent, certes, mais elles sont souvent génériques.

Le HTML sémantique permet de structurer son code pour qu’il soit compréhensible, non seulement par les navigateurs, mais aussi par les humains, les moteurs de recherche, et les technologies d’assistance.

<!-- Mauvais : les titres ne suivent pas une hiérarchie logique -->
<h5>Contactez-nous</h5>
<h1>Octo Technology</h1>

<!-- Bon : les titres suivent une hiérarchie claire -->
<h1>Octo Technology</h1>
<h2>Contactez-nous</h2>

Voici un retour d’expérience pragmatique; pourquoi et comment le HTML sémantique fait toute la différence.

Derrière chaque balise, une intention

Utiliser <section>, <article>, <header>, <footer> ou <nav> à la place des traditionnels <div> c’est un signal fort : ce contenu a un rôle spécifique. C’est une manière de décrire la structure logique d’une page, indépendamment de son apparence.

<!-- Moins clair -->
<div class="header">Bienvenue</div>

<!-- Plus clair -->
<header>Bienvenue</header>

C’est aussi un facilitateur : pour les lecteurs d’écran, pour les robots d’indexation, pour la personne qui développera la prochaine fois (ou vous-même dans six mois) qui devra relire ce code.

Accessible à tous : humains, navigateurs et technologies d’assistance

Il est facile de se dire : “Pourquoi j’irais apprendre des dizaines de balises quand ma page s’affiche correctement avec des <div> ?”.

Quand on réalise un produit destiné au public, on ne peut pas se contenter d’un “ça marche sur les cas que j’ai testés”. Pour du développement front, on va généralement tester avec la souris et sur des écrans et des machines puissantes. Mais pour une partie de l'audience, ça sera au clavier, et avec un Thinkpad de 2015. Ça n’est pas une problématique nouvelle, et la spécification HTML le comprend bien.

Un site accessible, maintenable, et bien structuré n’est pas qu’une question de rendu. C’est une question d’intention et de clarté. Sans structure sémantique, vous construisez un immeuble sans fondations : ça peut tenir debout, mais il faudra peut-être tout refaire au moindre changement.

Note utile : validez régulièrement votre code avec des outils comme WAVE ou HTML5 Validator.

Sémantique ≠ affichage

L’erreur courante : croire qu’une balise comme <strong> qui est utilisée par les lecteurs d’écran pour insister ou souligner l'importance d’un texte ou <em> qui montre qu’un mot mérite une lecture accentuée, doit forcément avoir un impact visuel. Faux. En HTML, la sémantique décrit la fonction, pas l’apparence. Le style, lui, se fait en CSS.

Les technologies d’assistance (comme les lecteurs d’écran) interprètent ces balises différemment d’un simple effet visuel.

Un lecteur d’écran, par exemple, annoncera un mot en <strong> avec un ton plus appuyé.

<p><strong>Important :</strong> cette étape ne doit pas être ignorée.</p>

strong {
  color: red;
  font-weight: bold;
}

C’est justement cette séparation des responsabilités qui rend le code plus propre. Le HTML dit quoi, le CSS dit comment.

Note utile : arrêtez d’utiliser des classes comme .footer sur une <div>. Utilisez <footer> et donnez-lui une classe si besoin. C’est plus clair, et plus durable.

Si vous ne le faites pas pour vous, faites-le pour les autres

Un code bien structuré aide les lecteurs d’écran à naviguer plus efficacement. Il permet à une personne malvoyante de sauter directement au contenu principal, de repérer les titres d’articles, ou de comprendre rapidement la hiérarchie d’une page.

<main>
  <article>
    <h1>Titre de l’article</h1>
    <p>Contenu...</p>
  </article>
</main>

Même chose côté SEO : un moteur de recherche comprend mieux ce que vous publiez si vous utilisez les bons éléments HTML. Ce n’est pas un hack. C’est juste du bon sens appliqué au web.

Note utile : n’attendez pas qu’un expert accessibilité fasse un audit de votre site. Commencez dès aujourd’hui à coder en pensant à tous vos utilisateurs.

Le bon outil pour le bon usage

Utiliser le HTML sémantique, ce n’est pas une contrainte. C’est une habitude à prendre. Il y a une balise pour chaque usage :

<header>Haut de page</header>
<nav>Menu principal</nav>
<main>
  <article>
    <h1>Titre</h1>
    <p>Texte de l’article...</p>
  </article>
</main>
<footer>Pied de page</footer>

et aussi:

<aside> pour du contenu secondaire
<figure> et <figcaption> pour des images légendées
<dialog> pour les boîtes de dialogue natives
<progress> pour indiquer l’avancement d’un traitement
<mark> pour mettre en évidence un passage
<output> pour afficher le résultat d’un calcul ou d’une interaction

etc.

Note utile : les <div> ne sont pas interdites en complément des balises sémantiques, pour aider à la mise en page du site. Mais si une balise portant une sémantique est appropriée, elle sera au moins bénéfique voire nécessaire. Il est de bon goût de vérifier si une balise est approprié et bien supporté sur Developer Mozilla ou bien CanIUse.

Un mot sur les composants Custom

Il arrive fréquemment de devoir implémenter des composants personnalisés : menus déroulants, datepickers, sliders… et notamment les célèbres <select> customisés. Ces éléments peuvent répondre à des besoins spécifiques de design ou d’expérience utilisateur.

Cela dit, il est bon de se rappeler qu’un <select> natif offre déjà beaucoup : accessibilité intégrée, compatibilité clavier, support des lecteurs d’écran, tout cela en une seule ligne de HTML.

<label for="pays">Choisissez un pays :</label>
<select id="pays" name="pays">
  <option>France</option>
  <option>Belgique</option>
  <option>Suisse</option>
</select>

Lors de la conception ou du maquettage, il peut être utile de se poser cette simple question: Est-ce que ce composant a vraiment besoin d’être personnalisé, ou le natif suffit-il ?

Parfois, rester proche du HTML standard avec un CSS adapté, c’est faire un choix plus simple, plus robuste, et plus inclusif.

En résumé : coder pour la clarté

Le HTML sémantique n’est pas un luxe. C’est une base. C’est une manière de coder pour les autres, pour l’avenir, pour la maintenabilité. C’est aussi un réflexe à adopter si vous voulez créer des applications robustes, accessibles, et professionnelles:

Pour l’accessibilité : il permet aux technologies d’assistance (lecteurs d’écran, navigation clavier...) d’offrir une expérience utilisateur complète à tous.
Pour la maintenabilité : un code clair, bien structuré, facilite la lecture, la revue et l’évolution par vous-même ou vos collègues, même longtemps après.
Pour le référencement : les moteurs de recherche comprennent mieux et valorisent votre contenu quand il est correctement balisé.

À long terme, la vraie compétence ne sera pas “faire une page qui s’affiche”, mais “faire une page qui a du sens”. Et ça commence… par choisir la bonne balise.