Input HarborISSUE #42 of 46

tag reference · the full element list

FormaVSCaptain Invalid Input

Forma saysThere are ~110 HTML elements — knowing the reference exists keeps you from rebuilding what the browser already ships.

You'll use ~30 elements daily, but the full set has gems people miss: <details>/<summary> (native accordion), <dialog> (native modal), <progress> and <meter> (bars), <output>, <time>, <abbr>.

Before building a custom widget, check whether a native element does it — you'll get accessibility and keyboard support for free. MDN's element reference is the canonical, always-current list.

Power-ups you unlock

~110 elements; you use ~30 routinely
Native gems: <details>, <dialog>, <progress>, <meter>
Native widgets come with free accessibility + keyboard support
MDN is the canonical element reference

Captain Invalid Input attacks — common mistakes

Building a JS accordion when <details> already exists
A custom modal instead of the native <dialog>
Reinventing a progress bar instead of <progress>

Boss battleUse <details>/<summary> for a collapsible FAQ and a <progress> bar — no JavaScript required.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <details>
    <summary style="cursor:pointer;color:#b388ff">native accordion — click me</summary>
    <p>no JavaScript. the browser handles open/close and keyboard.</p>
  </details>
  <p>progress: <progress value="64" max="100"></progress></p>
  <p>meter: <meter value="0.7" min="0" max="1"></meter></p>
</body></html>

▶ Open the interactive comic issue

‹ Manifest · Turning A Page Into An App Attribute Reference · Global Attributes ›