Modern HTML

Introduction to Modern HTML

For a long time, building an accordion, modal, or floating menu meant reaching for a JavaScript library before writing any HTML.

Modern HTML gives the browser more of that work.

The platform now includes elements and attributes with built-in state, keyboard behavior, focus management, dismissal, and accessibility semantics. We still use CSS for presentation and JavaScript for application logic—but we no longer have to recreate every interaction from scratch.

Start with the platform

Disclosure / FAQ: <details> and <summary>
Non-modal or modal window: <dialog>
Menu, tooltip-like panel, or floating UI: popover
Declarative control: popovertarget, command, and commandfor

A useful rule of thumb:

Use HTML for meaning and state, CSS for presentation, and JavaScript only for behavior the platform does not already provide.

A zero-JavaScript interface

This page contains a disclosure and a popover. The browser owns both interactions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Modern HTML</title>
</head>
<body>
  <h1>Release notes</h1>

  <details>
    <summary>What changed?</summary>
    <p>The browser can now manage more common interface behavior for us.</p>
  </details>

  <button popovertarget="platform-notes">Show platform notes</button>
  <div id="platform-notes" popover>
    Press <kbd>Escape</kbd> or click outside this panel to dismiss it.
  </div>
</body>
</html>

Open Sandbox

That small amount of markup gives us:

Keyboard-operable controls
Browser-managed open and closed state
Useful accessibility semantics
Light-dismiss behavior for the popover
Escape-key dismissal
No dependency, event listener, or state variable

Native does not mean finished

Built-in behavior is a strong foundation—not permission to stop thinking.

We still need to provide:

Clear labels and logical document structure
Visible focus styles
Appropriate color contrast
Predictable placement and motion
Testing with keyboards, screen readers, zoom, and touch input
Fallbacks when using newly introduced platform features

New HTML features do not all arrive in every browser at the same time. Begin with useful semantic content, layer newer attributes on top, and check current support before making a new feature essential to a task.

Less JavaScript, not no JavaScript

<details>, <dialog>, and popover manage common interaction state. JavaScript is still the right tool when we need to:

Fetch or save data
Validate a multi-step workflow
Coordinate several parts of an application
React to lifecycle events
Add behavior that HTML does not provide

The difference is that our script can focus on the application’s job instead of rebuilding buttons, focus traps, and dismissal logic.

What is next?

We will begin with <details>, move into modal and non-modal <dialog> behavior, then take a quick look at popovers and the Invoker Commands API—including command and commandfor, which let buttons control supported elements declaratively.