dialog, datalist, meter, output, details : le HTML livre des composants d'interface complets que des générations de devs ont recodés en JavaScript. Inventaire.
Il existe un composant de modale accessible, avec gestion du focus, fermeture par Échap et arrière-plan assombri. Zéro dépendance, maintenu par les meilleurs ingénieurs du monde, mis à jour automatiquement chez tous tes utilisateurs.
Son nom : "dialog". Sa date d'arrivée dans le standard : il y a des années. Nombre de fois où tu l'as vu utilisé : soyons polis.
Le HTML est plein de ces composants fantômes : une interface complète que l'industrie recode en JavaScript, par habitude et par ignorance. Inventaire des plus rentables.
dialog : la modale qu'on réinvente tous les six mois
<dialog id="confirm">
<p>Supprimer cet article ?</p>
<form method="dialog">
<button value="cancel">Annuler</button>
<button value="ok">Supprimer</button>
</form>
</dialog>
<script>document.getElementById('confirm').showModal();</script>"showModal()" gère le focus piégé, la touche Échap, l'inertie du fond, le "::backdrop" stylable en CSS. Le "form method='dialog'" ferme la boîte en renvoyant la valeur du bouton : même la plomberie du résultat est fournie.
Des années-homme de bibliothèques de modales, résumées en une balise. C'est presque vexant.
details : l'accordéon sans script
<details>
<summary>Voir les spécifications</summary>
<p>Contenu replié…</p>
</details>Accordéon natif, accessible, stylable, animable désormais avec les capacités CSS récentes. Bonus méconnu : "details name='faq'" groupe plusieurs éléments en accordéon exclusif : l'ouverture de l'un ferme les autres. Une FAQ interactive entière sans un octet de JavaScript. Le nombre de plugins jQuery morts pour ce résultat mériterait un monument.
datalist : l'autocomplétion du pauvre (qui est riche)
<input list="villes" name="ville">
<datalist id="villes">
<option value="Nantes"></option><option value="Nancy"></option><option value="Nice">
</option></datalist>Un champ libre avec suggestions filtrées à la frappe. Pas aussi personnalisable qu'un combobox maison, mais fonctionnel en quatre lignes là où le composant custom en réclame quatre cents. Et le tien, gère-t-il le clavier, le tactile et le lecteur d'écran ? Le natif, oui, d'office.
meter et progress : les jauges sémantiques
<meter value="0.7" low="0.3" high="0.8" optimum="1">70 %</meter>
<progress value="32" max="100">32 %</progress>"progress" pour une progression, "meter" pour une mesure dans une plage.
meter change de couleur tout seul selon les seuils "low/high/optimum" : jauge de force de mot de passe, score, capacité disque, sans une ligne de logique d'affichage. Deux balises que peu de devs peuvent citer, et qui remplacent la plupart des jauges en "div" bricolées.
BONUS : output, time et kbd : la sémantique qui travaille
- output : le résultat d'un calcul lié à un formulaire. Les lecteurs d'écran annoncent ses mises à jour comme une région vivante : l'accessibilité d'un simulateur de prix, offerte par la balise.
- time datetime="2026-07-17" : la date lisible par les machines. Moteurs, lecteurs RSS et agrégateurs te disent merci.
- Kbd "Ctrl+S" : les touches clavier, sémantiques et stylables en « touches » avec trois règles CSS. Indispensable à tout contenu technique, utilisé presque nulle part.
Pourquoi cet oubli collectif ?
Trois raisons se cumulent. L'historique : beaucoup de ces balises ont longtemps souffert d'un support inégal, et les habitudes prises à l'époque ont survécu à leur cause : le support est excellent depuis des années. Le style : le natif était réputé instylable, argument périmé à mesure que "::backdrop", "accent-color" et les pseudo-éléments ouvrent les composants au CSS.
Et la culture : une génération formée framework-first a appris à chercher un paquet npm avant de chercher dans la liste des éléments HTML, qui se lit en vingt minutes et rapporte pour dix ans.
L'audit rentable
Le réflexe à installer, avant tout composant d'interface : « le HTML le fait-il déjà ? ». La réponse est oui plus souvent qu'on croit, et chaque oui supprime du code à écrire, tester, maintenir, et casse moins, car le natif ne dépend d'aucune mise à jour de ta part. Moins de code, plus d'accessibilité, zéro maintenance : c'est la seule offre du métier où il n'y a pas de piège. Le HTML attend depuis vingt ans qu'on lise sa documentation. Il a été patient ; il peut te rendre rapide.