HTML Can Do That · Chris Burnell

HTML Can Do That

HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.

Available since March 2022

Chrome 37+

Edge 79+

Firefox 98+

Opera 24+

Safari 15.4+

Chrome Android 37+

Firefox for Android 98+

Opera Android 24+

Safari on iOS 15.4+

Samsung Internet 3+

WebView Android 37+

Opened and closed entirely with command and commandfor HTML attributes that describe what command is being directed at which element, matched by id.

Open dialog

Look, Ma! No JavaScript!

Close

button command="show-modal" commandfor="example-dialog">Open dialogbutton><br>dialog id="example-dialog"><br>p>Look, Ma! No JavaScript!p><br>form method="dialog"><br>button type="submit">Closebutton><br>form><br>dialog>

popover

Available since January 2025

Chrome 114+

Edge 114+

Firefox 125+

Opera 100+

Safari 17+

Chrome Android 114+

Firefox for Android 125+

Opera Android 76+

Safari on iOS 17+

Samsung Internet 23+

WebView Android 114+

Light dismiss, Esc to close, no managing z-index to wrangle it onto a top later. All managed with popover and popovertarget attributes in HTML.

Toggle popover

Same deal as the above: no JS, just HTML attributes!

button popovertarget="example-popover">Toggle popoverbutton><br>div id="example-popover" popover><br>p>Same deal as the &lt;dialog" class="token entity named-entity">&gt; above: no JS, just HTML attributes!p><br>div>

Grouped

Available since September 2025

Chrome 120+

Edge 120+

Firefox 130+

Opera 106+

Safari 17.2+

Chrome Android 120+

Firefox for Android 130+

Opera Android 80+

Safari on iOS 17.2+

Samsung Internet 25+

WebView Android 120+

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

First<br>Open the seond one and watch this close on its own.

Second<br>First one’s hidden now.

details name="example-group"><br>summary>Firstsummary><br>p>Open the seond one and watch this close on its own.p><br>details><br>details name="example-group"><br>summary>Secondsummary><br>p>First one’s hidden now.p><br>details>

command & commandfor

Available since December 2025

Chrome 135+

Edge 135+

Firefox 144+

Opera 120+

Safari 26.2+

Chrome Android 135+

Firefox for Android 144+

Opera Android 89+

Safari on iOS 26.2+

Samsung Internet 29+

WebView Android 135+

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.

Two separate HTML buttons controlling one popover. No scripting.

Open<br>Close

show-popover opens this and hide-popover closes it!

button command="show-popover" commandfor="example-command-popover">Openbutton><br>button command="hide-popover" commandfor="example-command-popover">Closebutton><br>div id="example-command-popover" popover><br>p>code>show-popovercode> opens this and code>hide-popovercode> closes it!p><br>div>

Native input pickers

Available since March 2017

Chrome: Colour 20+, Range 4+, Date 20+

Edge: Colour 14+, Range 12+, Date 12+

Firefox: Colour 29+, Range 23+, Date 57+

Opera: Colour 12+, Range 11+, Date 11+

Safari: Colour 12.1+, Range 3.1+, Date 14.1+

Chrome Android: Colour 25+, Range 57+, Date 25+

Firefox for Android: Colour 27+, Range 52+, Date 57+

Opera Android: Colour 12+, Range 11+, Date 11+

Safari on iOS: Colour 12.2+, Range 5+, Date 5+

Samsung Internet: Colour 1.5+, Range 7+, Date 1.5+

WebView Android: Colour 4.4+, Range 4.4+, Date 4.4+

Colour, range, and date pickers, built right into the browser.

Your mileage may vary with these elements; although, hand-written JS solutions tend to vary wildly, and I think we can expect form elements to receive more love over the coming years.

Colour

Range

Date

label>Colour input type="color" value="#5f8aa6" autocomplete="off">label><br>label>Range input type="range" min="0" max="100" value="50" autocomplete="off">label><br>label>Date input type="date" autocomplete="off">label>

Available since March 2019

Chrome 20+

Edge 12+

Firefox 4+

Opera 9.5+

Safari 12.1+

Chrome Android 33+

Firefox for Android 79+

Opera Android 20+

Safari on iOS 12.2+

Samsung Internet 2+

WebView Android 4.4.3+

Note: This isn’t yet supported across the board with all input types, e.g. colour or date inputs.

Native autocomplete suggestions, no dropdown library required.

Favourite HTML element

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

datalist>

loading="lazy"

Available since March 2022

Chrome 77+

Edge 79+

Firefox 75+

Opera 64+

Safari 15.4+

Chrome Android 77+

Firefox for Android 79+

Opera Android 55+

Safari on iOS 15.4+

Samsung Internet 12+

WebView Android 77+

This image...