Introduction
HTML, the markup language you thought you knew inside out, has made impressive strides in recent years. Features that once required JavaScript are now available directly through HTML. This evolution is a game-changer for web developers seeking to create dynamic user interfaces without added complexity.
The Power of Dialogs
Since March 2022, the <dialog> tag has been supported by browsers like Chrome, Firefox, and Safari. It allows for the creation of modal dialog boxes without a single line of JavaScript. By simply using HTML attributes such as open and close, you can manage the display of these elements.
``html <button command="show-modal" commandfor="example-dialog">Open dialog</button> <dialog id="example-dialog"> <p>Look, Ma! No JavaScript!</p> <form method="dialog"> <button type="submit">Close</button> </form> </dialog> ``
HTML Popovers
With the release of Chrome version 114 in January 2025, popovers can be managed solely with HTML attributes popover and popovertarget. Say goodbye to z-index wrangling and popup closure hassles!
``html <button popovertarget="example-popover">Toggle popover</button> <div id="example-popover" popover> <p>Just like dialogs, no need for JavaScript!</p> </div> ``
Accordions with <details>
Since September 2025, <details> can be grouped with a name attribute to create exclusive accordions. Simply click one to automatically close the others.
``html <details name="example-group"> <summary>First</summary> <p>Open the second one and watch this close on its own.</p> </details> <details name="example-group"> <summary>Second</summary> <p>First one's hidden now.</p> </details> ``
HTML Commands: Ultimate Simplification
HTML commands, introduced in December 2025, allow elements to be controlled intuitively with command and commandfor attributes. Currently, only a few actions are possible, but more features are anticipated.
``html <button command="show-popover" commandfor="example-command-popover">Open</button> <button command="hide-popover" commandfor="example-command-popover">Close</button> <div id="example-command-popover" popover> <p><code>show-popover</code> opens and <code>hide-popover</code> closes!</p> </div> ``
Conclusion
The expansion of HTML capabilities simplifies developers' work by reducing reliance on JavaScript for certain common tasks. This means less code, fewer potential bugs, and a smoother user experience.
Let's discuss your project in 15 minutes.