Introduction
HTML, ce langage de balisage que tu pensais connaître par cœur, a fait des progrès impressionnants ces dernières années. Des fonctionnalités qui nécessitaient autrefois JavaScript sont désormais disponibles directement via HTML. Cette évolution change la donne pour les développeurs web qui cherchent à créer des interfaces utilisateur dynamiques sans complexité supplémentaire.
Le Pouvoir des Dialogues
Depuis mars 2022, le tag <dialog> est supporté par des navigateurs comme Chrome, Firefox, et Safari. Il permet de créer des boîtes de dialogue modales sans une seule ligne de JavaScript. En utilisant simplement les attributs HTML tels que open et close, tu peux gérer l'affichage de ces éléments.
``html <button command="show-modal" commandfor="example-dialog">Ouvrir le dialogue</button> <dialog id="example-dialog"> <p>Regarde, Maman ! Pas de JavaScript !</p> <form method="dialog"> <button type="submit">Fermer</button> </form> </dialog> ``
Les Popovers en HTML
Avec la sortie de la version 114 de Chrome en janvier 2025, les popovers peuvent être gérés uniquement avec des attributs HTML popover et popovertarget. Finies les galères de gestion des indices z et des fermetures de popups !
``html <button popovertarget="example-popover">Toggle popover</button> <div id="example-popover" popover> <p>Comme les dialogues, pas besoin de JavaScript !</p> </div> ``
Accordéons avec <details>
Depuis septembre 2025, les <details> peuvent être regroupés avec un attribut name pour créer des accordéons exclusifs. Il suffit de cliquer sur un pour fermer les autres.
``html <details name="example-group"> <summary>Premier</summary> <p>Ouvre le deuxième et celui-ci se ferme automatiquement.</p> </details> <details name="example-group"> <summary>Deuxième</summary> <p>Le premier est maintenant caché.</p> </details> ``
Commandes HTML : Simplification Ultime
Les commandes HTML, introduites en décembre 2025, permettent de contrôler les éléments de manière intuitive avec des attributs command et commandfor. Pour l'instant, seules quelques actions sont possibles, mais de nouvelles fonctionnalités sont attendues.
``html <button command="show-popover" commandfor="example-command-popover">Ouvrir</button> <button command="hide-popover" commandfor="example-command-popover">Fermer</button> <div id="example-command-popover" popover> <p><code>show-popover</code> ouvre et <code>hide-popover</code> ferme !</p> </div> ``
Conclusion
L'expansion des capacités d'HTML simplifie le travail des développeurs en réduisant la dépendance au JavaScript pour certaines tâches courantes. Cela signifie moins de code, moins de bugs potentiels et une expérience utilisateur plus fluide.
Discutons de ton projet en 15 minutes.