Combien de balises HTML utilisez-vous réellement? La plupart des développeurs disposent d’un arsenal d’une douzaine d’éléments: div, p, a, img, span, les titres et les listes. Les quelque 100 balises restantes de la spécification restent inutilisées, simplement parce qu’on les a oubliées ou qu’on ne les a jamais connues.

C’est une erreur. Les navigateurs ont appris à comprendre la sémantique plus en profondeur qu’on ne le pense. Les lecteurs d’écran s’appuient dessus. Les moteurs de recherche analysent la structure. La bonne balise au bon endroit apporte accessibilité, SEO et un code lisible, sans une seule ligne de JS.

Nous avons sélectionné 18 balises HTML qui méritent d’intégrer votre balisage quotidien. Elles ne sont pas nouvelles au sens de «tout juste sorties de la spécification», mais elles le sont pour beaucoup de développeurs parce qu’elles ont été injustement négligées. Certaines viennent de HTML5, d’autres ont toujours existé dans la spécification. Chacune est accompagnée d’un exemple fonctionnel et d’une explication sur son utilité concrète.

💡 Aperçu rapide:

• Quelles balises résolvent les problèmes d’accessibilité et de sémantique sans JavaScript
• Où sub/sup, dfn, var et time s’avèrent utiles pour le balisage de texte
• Comment <q>, <blockquote> et <cite> formatent correctement les citations
• Pourquoi <video>, <picture> et <figure> organisent le contenu multimédia
• Ce que del/ins, meter, dialog et menu apportent aux interfaces

1. Balisage sémantique du texte: sub, sup, dfn, var, time, kbd

Cinq balises qui transforment un texte brut en une structure compréhensible à la fois par les machines et par les humains. Pas de JS, uniquement du HTML natif.

<sub>** et **<sup>: indice et exposant. Formules chimiques, exposants mathématiques, notes de bas de page. Le CSS peut visuellement abaisser ou élever du texte avec vertical-align, mais il ne transmettra pas la sémantique. Et cela a son importance: un lecteur d’écran annoncera «H deux O» plutôt que de lire «H deux O» comme du texte normal. Ne les utilisez pas à des fins purement décoratives; les styles existent pour cela.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>: un terme en cours de définition. Lorsque vous introduisez un nouveau concept et que vous en donnez la définition, enveloppez le terme dans cette balise. Le navigateur ne fait rien de visuel avec, mais les moteurs de recherche et les extensions de dictionnaire utilisent <dfn> pour constituer un glossaire de la page. L’attribut id vous permet de créer des références arrière lorsque vous mentionnez à nouveau le terme.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>: une variable. Dans la documentation technique, les tutoriels, les descriptions de formules. Les navigateurs l’affichent en italique par défaut. Pour les expressions mathématiques complètes, MathML est préférable, mais <var> est pratique lorsque la variable fait partie d’une phrase.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>: une date ou une heure. Les machines peinent à analyser «2 avril» au milieu d’un paragraphe. La balise <time> isole la date et fournit un format lisible par machine via l’attribut datetime. Calendriers, moteurs de recherche, analyseurs d’événements: tous vous remercieront.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>: saisie clavier. Instructions, raccourcis clavier, commandes. Affiché visuellement dans une police à chasse fixe, il sépare sémantiquement les noms de touches du texte environnant. Vous pouvez les imbriquer pour les combinaisons.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Citations et références de sources: q, blockquote, cite

Trois balises qui couvrent tous les scénarios de citation, d’une phrase en ligne à un long extrait de livre.

<q>: une citation en ligne à l’intérieur d’un paragraphe. Le navigateur encadre automatiquement le contenu avec les guillemets correspondant à la langue de la page. L’attribut optionnel cite indique l’URL source. L’utilisateur ne la voit pas, mais les moteurs, si.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>: une citation en bloc. Pour les extraits longs: un paragraphe d’un article, une critique, un passage d’une spécification. Prend également en charge cite. Le navigateur ajoute un retrait par défaut, et vous pouvez le styliser comme vous le souhaitez.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>: le titre de l’œuvre citée. Uniquement le titre: un livre, un article, un film, un jeu. Pas le nom de l’auteur, pas la date, juste le titre. Les navigateurs l’affichent en italique par défaut. On le confond souvent avec l’attribut cite de <q>/<blockquote>, mais ce sont deux choses différentes: l’attribut stocke une URL, tandis que la balise <cite> affiche le titre à l’utilisateur.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Structure du document: address et dl/dt/dd

<address>: informations de contact. Pas l’adresse postale d’une entreprise (cela se gère avec les microdonnées Schema), mais les coordonnées de l’auteur de la page ou de l’article. Placée dans <article>, elle se réfère à l’auteur de l’article; dans <body>, au propriétaire du site. Les moteurs de recherche utilisent ce bloc pour construire le Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>: une liste de description. Pas seulement un «glossaire de termes», mais toute structure de type «clé/valeur»: spécifications produit, métadonnées, FAQ. Un terme (<dt>) peut avoir plusieurs descriptions (<dd>), et inversement. L’ordre est important: le terme vient en premier, puis sa description.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Contenu média: video, picture et figure/figcaption

Trois outils puissants pour travailler avec du contenu visuel et multimédia. Chacun couvre son propre éventail de tâches.

<video>: vidéo intégrée sans lecteur tiers. Vous pouvez spécifier un seul src ou plusieurs éléments <source>; le navigateur choisit le premier format pris en charge. Détail utile: l’attribut autopictureinpicture réduit automatiquement la vidéo dans une fenêtre flottante lors du changement d’onglet, tandis que disablepictureinpicture l’empêche. De même, disableremoteplayback contrôle la diffusion vers Chromecast et Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>: images responsives avec un contrôle total. Contrairement à srcset sur <img>, où le navigateur choisit la source, <picture> vous permet de spécifier des media queries strictes. Différents formats (WebP pour Chromium, JPEG pour les autres), différents recadrages pour le mobile, une version sombre pour le mode sombre, le tout sans une seule ligne de JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** et **<figcaption>: un contenu autonome accompagné d’une légende. Une illustration, un diagramme, un bloc de code, un tableau, tout ce qui peut être retiré du flux principal sans perte de sens. <figcaption> lie sémantiquement la légende au contenu: un lecteur d’écran les lit ensemble plutôt que comme des éléments séparés. Si le contenu n’a qu’un rapport indirect avec le texte (par exemple, une citation dans un encadré), utilisez plutôt <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Cartes de navigation: map et area

Anciennes, mais pas obsolètes. Les cartes d’image rendent cliquables des zones spécifiques d’une image. Là où le texte atteint ses limites (un plan de métro interactif, un plan d’étage, un schéma anatomique), <map> et <area> fonctionnent sans JavaScript.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

L’attribut shape accepte les valeurs circle, rect, poly et default. Les coordonnées sont en pixels depuis le coin supérieur gauche. Pour les contours complexes, utilisez poly avec une liste de points. Malgré son âge (cette balise a bien plus de vingt ans), elle bénéficie d’un support stable sur tous les navigateurs.

6. Édition de texte: del et ins

Quand vous montrez des modifications, l’historique d’un document, des mises à jour d’article ou des comparatifs législatifs, <del> et <ins> offrent une représentation sémantiquement correcte. <del> indique le contenu supprimé (les navigateurs le barrent), <ins> indique le contenu ajouté (les navigateurs le soulignent).

Les deux prennent en charge cite (pourquoi cela a changé) et datetime (quand). Les moteurs de recherche voient l’historique des révisions de la page plutôt qu’un simple texte écrasé.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

N’utilisez pas <del> et <ins> pour un simple barré décoratif; text-decoration: line-through existe pour cela. Ces balises concernent spécifiquement le versionnage de contenu.

7. Champs de saisie nouvelle génération

L’élément <input> a beaucoup évolué au-delà des simples chaînes de texte. Les navigateurs modernes prennent en charge des dizaines de types, chacun apportant une validation intégrée, un clavier adapté au mobile et des widgets natifs, sans une seule ligne de JavaScript.

Les types clés que beaucoup de projets ignorent encore:

• type="color": un sélecteur de couleur. Un nuancier natif sans avoir à intégrer une bibliothèque de spectre.
• type="range": un curseur entre min et max. Volume, prix, note, le tout sans coder de slider.
• type="date": un calendrier localisé. Le navigateur affiche un sélecteur de date dont le formatage s’adapte à la région de l’utilisateur.
• type="datetime-local": date et heure sans fuseau horaire. Pour les réservations, les échéances, les planificateurs.

L’attribut pattern accepte une expression régulière: la valeur ne passera pas la validation tant qu’elle ne correspondra pas au motif.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Indicateurs numériques

Ne le confondez pas avec <progress>: <meter> sert à représenter une valeur statique dans un intervalle connu (espace disque, score, note), tandis que <progress> indique l’avancement d’une tâche (téléchargement, processus par étapes).

Le navigateur colore automatiquement <meter> selon la position de la valeur par rapport à low, high et optimum. Zone verte: valeur proche de l’optimum; jaune: tolérable; rouge: en dehors de la plage normale. La logique de couleur peut être personnalisée en CSS, mais la sémantique de base fonctionne sans rien faire.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Éléments interactifs: dialog et menu

Deux balises pour des interactions qui nécessitaient auparavant des bibliothèques JS ou un développement from scratch.

<dialog>: une fenêtre modale native. L’élément est masqué par lui-même. Ajoutez l’attribut open et le navigateur l’affiche au-dessus de la page dans la top layer. La méthode JavaScript showModal() fournit également le pseudo-élément ::backdrop pour assombrir l’arrière-plan. Popup, confirmation d’action, alerte, le tout sans une seule ligne de positionnement CSS.

Support: Chrome, Edge, Firefox, Safari (depuis 2022). Pour les navigateurs plus anciens, le dialogue s’affiche simplement comme un conteneur bloc classique; des polyfills sont disponibles.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>: une liste d’actions interactives. Pas pour la navigation (utilisez <nav> pour cela), mais spécifiquement une barre d’outils: les pinceaux dans un éditeur graphique, les boutons de mise en forme, les actions sur un objet. L’équivalent sémantique de <ul>, mais pour des boutons et des commandes. Il n’a pas de style par défaut, seulement du sens.

L’attribut type="toolbar" (le seul restant dans la spécification) définit explicitement le rôle de barre d’outils. Le type contextuel a été retiré du standard, donc <menu> sert aujourd’hui exclusivement à des ensembles d’actions visibles à l’écran.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Si le balisage HTML est nouveau pour vous, voici une excellente introduction de Traversy; Traversy Media est l’une des meilleures chaînes frontend sur YouTube:

⁉️🤔 Foire aux questions

Pourquoi utiliser des balises sémantiques quand on peut tout construire avec des <div> et des <span>?

Les lecteurs d’écran s’appuient sur les balises pour construire la structure de la page pour les utilisateurs non-voyants; div est invisible pour eux. Les moteurs de recherche extraient la sémantique pour les rich snippets: les notes via <meter>, les FAQ via <dl>, les contacts via <address>. De plus, le code se documente lui-même: <article> dit immédiatement «ceci est un article», alors que <div class="article"> ne le dit pas.

Parmi les balises de la liste, lesquelles sont déjà utilisables en production sans risque?

Les dix-huit. <dialog> a obtenu un support multi-navigateur avec Safari 15.4 (2022), <menu> fonctionne de facto comme un conteneur sémantique partout. <picture> et <video> avec <source> sont matures depuis 2016. <meter>, <time>, <kbd>, <dfn> viennent de l’héritage profond de HTML et bénéficient d’un support universel. La seule réserve: <input type="date"> et type="color" peuvent s’afficher différemment selon les systèmes d’exploitation, mais cela ne casse pas la fonctionnalité.

Est-ce que <b> et <i> sont mortes?

Non, mais leur rôle a changé. <b> sert désormais à attirer l’attention sans transmettre d’importance (mots-clés dans un CV), <i> est pour les expressions idiomatiques, les termes dans une autre langue, les noms de navires. Pour souligner une importance, utilisez <strong>; pour une emphase d’accentuation, <em>. Le gras et l’italique purement stylistiques relèvent uniquement du CSS.

Puis-je utiliser <meter> pour une barre de progression de chargement?

Non. <meter> est fait pour une valeur statique dans une plage connue (utilisation disque, score, note). Pour une progression dans le temps, utilisez exclusivement <progress>. Les navigateurs animent <progress> lorsque value change, tandis que <meter> reste statique. On les confond constamment, mais leur sémantique diffère et les lecteurs d’écran les annoncent différemment.

Que dois-je faire si un navigateur ne supporte pas <dialog>?

L’élément s’affiche simplement comme un conteneur bloc et ne cassera rien. Ajoutez un polyfill: dialog-polyfill de l’équipe Google Chrome (400 lignes, sans dépendance) couvre showModal(), close() et ::backdrop pour les navigateurs plus anciens.

Quelle balise adopter en premier?

{iframe} et <picture> sont deux balises qui offrent un bénéfice maximal pour un effort minimal. {iframe} remplacera n’importe quel lecteur vidéo tiers par une fenêtre native dotée du picture-in-picture. <picture> élimine la commutation manuelle entre les formats WebP/AVIF; le navigateur choisit ce qu’il comprend.

À partir de là, montez en puissance: <input> avec les types modernes (color, date, range) vous fera économiser des kilo-octets de widgets JavaScript. <dialog> supprime la dépendance aux bibliothèques de modales. <del>/<ins> met de l’ordre dans le versionnage de contenu.

Vous n’avez pas à implémenter les 18 en un seul sprint. Commencez par une balise par semaine. D’ici six mois, votre balisage sera sémantiquement riche et votre code auto-documenté, sans une seule ligne de JavaScript là où elle n’est pas nécessaire.

Si vous ne savez pas par où commencer, ouvrez votre projet actuel, trouvez le <div class="..."> le plus proche dépourvu de sémantique claire, et remplacez-le par une balise appropriée de la liste. La différence de lisibilité du code sera immédiatement perceptible.