HTML has been gobbling up swaths of what used only to be doable using JavaScript. Read on for a bunch of dynamic functionality that we can now achieve with just HTML.

Popovers

This popover is easy to dismiss, using the Esc key or a button to close. There’s no managing z-index to wrangle it onto a top layer. All managed with popover and popovertarget(and popovertargetaction) attributes in HTML. Details on which browsers support the HTML  popover.

Here’s an example:

Toggle popover

Here’s the code to create the popover:

<button popovertarget="example-popover">Toggle popover</button>
<div id="example-popover" popover>
	<p>No JavaScript, just modern browser magic, thanks to the wonderful folks speccing for the web and building our browsers!</p>
	<button popovertarget="example-popover" popovertargetaction="hide">Close</button>
</div>

Dialog boxes

There’s a similar thing going on as popover here, except this time with a dedicated element for modal dialog boxes. Details on which browsers support the HTML dialog.

See command / commandFor 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!)

Here’s the code:

<button popovertarget="example-dialog">Toggle the dialog popover</button>
<dialog id="example-dialog" popover>
	<p>Closed with just HTML via <code>&lt;form method="dialog"&gt;</code>, opened with the <code>popover</code> attribute.</p>
	<button popovertarget="example-dialog" popovertargetaction="hide">Close</button>
</dialog>

Grouped details, accordion-style

A shared name attribute turns a group of <details> into an exclusive accordion. Open one and the others close automatically. Magic!

Here’s what it looks like in action:

First

Click on the second one and watch this close on its own.

DON’T MISS  How to clean data with OpenRefine

Prepare to be amazed.

Second

First one’s hidden now.

And here’s the code:

<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>

Controlling popovers with command and commandfor

Separate HTML buttons controlling one popover. No scripting.

Note: So far only show-modal, close, request-close, toggle-popover, show-popover, and hide-popover are stable in browsers. We can look forward to invokers supported in the future to increment/decrement values, interact with media elements, copy text, etc.

Here’s the code:

<button command="show-popover" commandfor="example-command-popover">Open</button>
<button command="hide-popover" commandfor="example-command-popover">Close</button>
<dialog id="example-command-popover" popover>
	<p><code>show-popover</code> opens this and <code>hide-popover</code> closes it!</p>
	<button command="hide-popover" commandfor="example-command-popover">Close</button>
</dialog>

Lazy loading images

Lazy loading images speeds up page loads. This image defers loading until it’s near the viewport. Not an IntersectionObserver in sight.

Here’s an example:

And here’s the code:

<img src="https://chrisburnell.com/images/avatar@2x.jpeg" loading="lazy" width="200" height="200" alt="a photo portait of Chris Burnell’s face">

Hidden content revealed!

Navigating to the fragment link below reveals the hidden section. The browser automatically removes hidden="until-found".

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

Now the code:

<a href="#example-until-found">Jump to hidden content</a>
<div id="example-until-found" hidden="until-found">
	<p>Yahaha! You found me!</p>
</div>

Autocomplete

The datalist element allows native autocomplete suggestions, with no dropdown library required.

Warning! Support for this across input types is still pretty spotty, and there are also a number of issues in its implementation in browsers. See Adrian Roselli’s Under-Engineered Comboboxen for more info. You might even want to skip using this for now, and keep an eye on it to see if it improves over the new few years.

Here’s an example, start typing to see matches:

Favourite HTML element

And the code that powers it:

<label>Favourite HTML element <input type="text" id="example-datalist-input" list="example-datalist" autocomplete="off"></label>
<datalist id="example-datalist">
	<option value="a">
	<option value="abbr">
	<option value="address">
	<!-- ... -->
</datalist>

I welcome corrections or amends to this page! I am not an expert, but I’ve attempted to represent things honestly. Do not use this page to justify decisions to your boss. Or yourself. Don’t forget that not everyone browses the web like you do. And have fun with these new-ish features of HTML!

This post was originally written and built by Chris Burnell for HTML Day 2026 during the Online Event run by Zachary Kai on August 8, 2026.