HTML can do that.

ACCESSION TPL-037 · HTML Living Standard · collected 2013, tamed 2022

A real modal — focus trapped, page behind it inert, ::backdrop dimming the whole gallery. Opened by an invoker button, closed by a plain <form method="dialog">, the Esc key, or the dimmed floor itself where closedby has landed.

• invoke “Sound the rope” — watch the room dim
• press Esc, or click the darkness outside
• the pinned specimen stays on display even where invokers haven’t shipped

<button command="show-modal" commandfor="rope">…</button>
<dialog id="rope" closedby="any">
  <form method="dialog">
    <button>Admire & close</button>
  </form>
</dialog>

ACCESSION TPL-114 · HTML Living Standard · captured 2023

Any element, promoted to the top layer above everything else on the page. Light-dismiss means clicking anywhere else or pressing Esc sends it away — and popovertarget on a plain button is all the wiring it needs.

• open the field note, then click anywhere else — poof
• Esc dismisses; the trigger toggles on repeat presses
• the toast pops in over everything, no z-index arms race

<button popovertarget="note">Field note</button>
<div id="note" popover>
  <!-- light dismiss comes free -->
  <button popovertarget="note"
          popovertargetaction="hide">×</button>
</div>

ACCESSION INV-135 · HTML Living Standard · captured 2025

Declarative invoker buttons: commandfor aims a button at any target’s id, command names the verb — show-popover, hide-popover, toggle-popover, show-modal, close. Accessibility wiring like aria-expanded comes along free.

• three separate buttons, one shared target — they never collide
• watch the pad control the CRT and the modal alike

<button command="show-popover" commandfor="crt">On</button>
<button command="hide-popover" commandfor="crt">Off</button>
<div id="crt" popover>RECEIVING</div>

ACCESSION DSC-120 · HTML Living Standard · collected 1999, grouped 2023

Give sibling <details> the same name and they form an exclusive accordion — open a drawer and its siblings snap shut. Every code drawer on this page is a <details> too. It’s specimens all the way down.

• open Hall II — Hall I closes on its own
• full keyboard support: Tab, Enter, done

<details name="hall">
  <summary>Hall I</summary> …
</details>
<details name="hall">
  <summary>Hall II</summary> <!-- I snap shut -->
</details>

ACCESSION DSV-102 · HTML Living Standard · captured 2022

Content that stays hidden until the browser itself reveals it — via find-in-page or a fragment link. Rumour says a specimen catalogued only as COELACANTH lurks in this case. Find it two ways: search this page, or follow the rumour.

• press ⌘F / Ctrl+F and search coelacanth
• or click “follow the rumour” — the fragment reveals it too
• the browser removes hidden itself. We did nothing.

<a href="#fossil">Follow the rumour</a>
<div id="fossil" hidden="until-found">
  COELACANTH — found alive.
</div>

ACCESSION NET-077 · HTML Living Standard · captured 2019

Ten crates sit in the vault below. Each image carries loading="lazy" — the browser fetches them only as they near the viewport while you scroll the shelf. Not an IntersectionObserver in sight.

• scroll the vault slowly — crates materialise as you descend
• open DevTools → Network and watch the fetch order yourself
• decoding="async" rides along for good manners

<img src="crate.svg" loading="lazy"
    decoding="async" width="80" height="80" alt="…">

ACCESSION CTL-020 · HTML Living Standard · filed ages ago

Attach a <datalist> of <option>s to any <input> and the browser builds the suggestion list, filters it live as you type, and handles the keyboard. Free text still allowed — it’s a suggestion, not a cage.

• type d in the catalogue — suggestions filter instantly
• arrow down through the list, Enter to accept
• the slider’s notches? Also a datalist — tick marks for free

<input list="elements">
<datalist id="elements">
  <option value="dialog">
  <option value="details">
</datalist>

ACCESSION FRM-001 · HTML Living Standard · the oldest wing, continually renovated

Colour wells, calendars, clocks, sliders, switches — each is a single <input> whose type summons an entire native UI. The <select> even files <hr> separators between its <optgroup>s now.

• turn the colour dial — the case’s accent answers via accent-color
• open the calendar and clock pickers
• the “specimen alarm” is a real switch in Safari; a humble checkbox elsewhere

<input type="color">   <input type="date">
<input type="checkbox" switch>
<select><optgroup>…<hr><optgroup>…</select>

ACCESSION FRM-404 · HTML Living Standard · oldest continuous resident

required, type="email", pattern, min/max, minlength — declare the rules and the browser writes the error messages, paints the fields, and blocks the paperwork. Pass inspection and a plain fragment navigation stamps your slip.

• submit empty — the desk rejects it, natively
• watch fields tint as you satisfy :user-valid
• accession code wants the pattern AB-1234

<input required type="email">
<input required pattern="[A-Z]{2}-[0-9]{4}">
<input type="number" min="1" max="12">

ACCESSION MTR-006 · HTML Living Standard · calibrated early

<meter> knows what good looks like: give it low, high and optimum and it paints itself green, amber or red as values wander. <progress> with no value becomes a native indeterminate shimmer — genuinely animated, still no JavaScript.

• read the zones — the third gauge is red on purpose
• the bottom progress bar is animating right now, value-free

<meter min="0" max="100" value="72"
       low="30" high="80" optimum="60"></meter>
<progress></progress> <!-- indeterminate -->

ACCESSION SCR-061 · CSS WG · rolling since forever

Three dioramas on a scroll-snapping reel, steered by ordinary <a href="#…"> links. scroll-behavior: smooth supplies the glide, scroll-snap supplies the landing, :target frames the current scene. The same smooth glide carried you down this whole page.

• press I / II / III — the reel glides, then snaps
• swipe or drag it yourself; it still lands square

<div class="reel"> <!-- scroll-snap-type: x mandatory -->
  <figure id="dio-1">…</figure> …
</div>
<a href="#dio-2">II</a>

ACCESSION EDT-005 · HTML Living Standard · older than most frameworks

One attribute and the placard becomes an editable rich-text surface — cursors, selections, undo history, paste handling, the lot. spellcheck rides along and underlines your crimes in the browser’s own red.

• click the placard and rewrite it — go on, it’s allowed
• misspell something; watch the browser object
• undo works: ⌘Z / Ctrl+Z

<div contenteditable="true" spellcheck="true">
  Rewrite me.
</div>

ACCESSION MISC-∞ · HTML Living Standard · assorted

The specimens too small for their own rooms — each still alive, each still interactive or meaning-bearing. Hover, type, open, count.

• hover the abbreviation · type in the search box
• open the tiny drawer · read the countdown list

<abbr title="HyperText Markup Language">HTML</abbr>
<ol reversed start="5">…</ol>
<output for="a b">7</output>