HTML Can Do That

Originally authored by Chris Burnell, this piece explores how HTML is steadily reclaiming territory that was once the exclusive domain of JavaScript.

Update: 2026-08-20 This page was initially whipped up in a single hour during HTML Day 2026. Since then, I have refined it to better highlight areas where browser implementations are either lacking or fail to meet essential accessibility standards.

Caution: While these features are exciting, please prioritize accessibility when implementing them!

The Shift in Web Development

We are seeing a transition in how we build dynamic interfaces. The formula for complexity is essentially shifting: $\text{Complexity} = \text{JavaScript} \downarrow + \text{HTML} \uparrow$

Everything requires a JS library $\rightarrow$ Native browser capabilities.

📋 Feature Checklist

• Popovers
• Modal Dialogs
• Exclusive Accordions
• Invoker Commands
• Lazy Loading
• Fragment-based Visibility
• Native Input Pickers
• Autocomplete Datalists

---

🎈 Popovers

Modern browsers now handle "light dismiss" functionality (clicking outside to close) and the Esc key automatically. You no longer need to fight with z-index to keep elements on the top layer.

Key Attributes:

• popover: Defines the element as a popover.
• popovertarget: Links a trigger to the popover.
• popovertargetaction: Specifies the action (e.g., hide).

Example Implementation:

<button popovertarget="example-popover">Toggle popover</button>

<div id="example-popover" popover>
  <p>No JavaScript, just modern browser magic!</p>
  <button popovertarget="example-popover" popovertargetaction="hide">Close</button>
</div>

---

🖼️ Dialogs

The <dialog> element provides a dedicated way to create modal boxes. While it shares similarities with popovers, it is specifically designed for dialog interactions.

HTML-Only Approach: You can use the popover attribute or a <form method="dialog"> to close the window without scripts.

<button popovertarget="example-dialog" popover>Toggle &lt;dialog&gt;</button>

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

The JavaScript Approach: Despite the goal of this page, it's worth noting that JS still offers precise control via .showModal() and .close().

// Opening and closing via JS
document.getElementById("open-btn").addEventListener("click", () => {
  document.getElementById("js-dialog").showModal();
});

document.getElementById("close-btn").addEventListener("click", () => {
  document.getElementById("js-dialog").close();
});

---

📂 Grouped Details (Accordions)

By assigning a shared name attribute to multiple <details> elements, you create an exclusive accordion—opening one automatically closes the others.

• Feature: details name
• Behavior: Mutual exclusivity.

Example:

1. <details name="group"> $\rightarrow$ First Item
2. <details name="group"> $\rightarrow$ Second Item (Opening this closes the first).

---

🕹️ Command & CommandFor

The command and commandfor attributes allow buttons to act as "invokers" for popovers or dialogs.

Currently Stable Commands:

• show-modal / close / request-close
• toggle-popover / show-popover / hide-popover

Future possibilities include incrementing values, controlling media, or copying text.

<button command="show-popover" commandfor="cmd-popover">Open</button>
<button command="hide-popover" commandfor="cmd-popover">Close</button>

<dialog id="cmd-popover" popover>
  <p>Controlled by <code>show-popover</code> and <code>hide-popover</code>!</p>
  <button command="hide-popover" commandfor="cmd-popover">Close</button>
</dialog>

---

⚡ Performance & Visibility

Lazy Loading

The loading="lazy" attribute tells the browser to wait until an image is near the viewport before downloading it.

![Chris Burnell](/images/avatar@2x.jpeg "Portrait of Chris Burnell" width="200" height="200" loading="lazy")

Hidden Until Found

Using hidden="until-found", content remains invisible until a user navigates to its specific fragment link.

Note: This is experimental. It works well with browser search but may struggle with some screen reader implementations.

<a href="#secret">Jump to hidden content</a> $\rightarrow$ <div id="secret" hidden="until-found">Yahaha!</div>

---

🛠️ Native Form Inputs

Browsers now include built-in pickers for various data types.

⚠️ Warning: Browser implementations for these are inconsistent. Expect wild variations in default styling and potentially poor accessibility experiences.

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

---

📋 Datalists

The <datalist> element provides native autocomplete suggestions, removing the need for heavy third-party dropdown libraries.

Current Status:

• Support is "spotty" across different input types.
• Implementation issues persist.
• Recommendation: Refer to Adrian Roselli’s Under-Engineered Comboboxen and consider waiting for better stability before full adoption.