HTML Can Do That

HTML has been gobbling up swathes of what used to be Java Script’s remit.

HTML has been gobbling up swathes of what used to be Java Script’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML. Update 2026-08-20 : I originally built this page in one hour during HTML Day 2026 to write and celebrate HTML, but I’ve since made some edits to better express and highlight where the browser implementation of some of this stuff is severely lacking and/or completely fails to meet accessibility needs. So, by all means, try it out, but make it as accessible as you can ! Light dismiss, Esc to close, no managing z-index to wrangle it onto a top later. All managed with popover and popovertarget (and popovertargetaction ) attributes in HTML. ( MDN ) No Java Script, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers! Toggle popover No Java Script, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers! Close Browser Support: dialog → Similar thing going on as popover here, except this time with a dedicated element for modal dialog boxes. ( MDN ) See command / command For below for another, more recently-landing feature that allows us to open and close dialog elements (and will be useful for lots of other non-JS functionality, one day!). Once again the popover attribute is doing some heavy-lifting here! Toggle <dialog> popover Closed with just HTML via <form method="dialog"> , opened with the popover attribute. Close Even though it’s sort of against the spirit of this page, I want to include this short snippet of how to interact with dialog elements in Java Script: This one is opened with .show Modal() and closed with .close() , both called from Java Script.

Open dialog This one is opened with .show Modal() and closed with .close() , both called from Java Script. Close document.get Element ById("example-dialog-js-open").add Event Listener("click", () => { document.get Element ById("example-dialog-js").show Modal() }) document.get Element ById("example-dialog-js-close").add Event Listener("click", () => { document.get Element ById("example-dialog-js").close() }) Grouped Browser Support: details name → A shared name attribute turns a group of into an exclusive accordion. Open one and the others close automatically. Magic! ( MDN ) Separate HTML buttons controlling one popover. No scripting. ( MDN ) Note: So far only show-modal , close , request-close , toggle-popover , show-popover , and hide-popover have landed stable in browsers. We can look forward to invokers supported in the future to increment/decrement values, interact with media elements, copy text, etc. Open Close show-popover opens this and hide-popover closes it! Close loading="lazy" Browser Support: loading-lazy-attr → This image defers loading until it’s near the viewport. Not an Intersection Observer in sight. ( MDN ) hidden until-found Browser Support: hidden until-found → Navigating to the fragment link below reveals the hidden section. The browser automatically removes hidden="until-found" .

( MDN ) Note: This one’s still pretty new and only really plays nicely with browser default search, and not so well with screen reader search implementations, for example. Still, one to keep in the back pocket for another day down the road! Jump to hidden content Yahaha! You found me! Colour, Date & Time, Range Inputs Browser Support : input-color → , input-range → , input-datetime → Colour, range, and date pickers, built right into the browser. ( MDN: Color Input , MDN: Range Input , MDN: Color Input ) Warning! Some of these elements feel a little unfinished. I’m hoping that we can expect form elements to receive some more love over the coming years, but at this point in time, the implementations shipping in browsers are still lacking. I would tread very carefully with using some of these. You can expect things like the default browser styles of these elements to vary pretty wildly between browsers and for the accessibility experienecs to be very poor. Be wary of the many pitfalls!

⚡ Effects Interpreter