Details, Summary, Progress & Meter

Native HTML Widgets

HTML provides several interactive elements that work without JavaScript — no libraries needed.

<details> and <summary>: Native Accordion

A disclosure widget that toggles content visibility. The browser handles the open/close state, animation, and keyboard interaction.

<progress>: Task Completion

Shows completion of a task (0 to max). Indeterminate state (no value) shows an animation.

<meter>: Scalar Measurement

Shows a value within a known range. Color changes based on low/high/optimum thresholds. NOT for progress — use it for disk usage, grades, battery level, etc.

<output>: Calculation Result

Semantically marks the result of a calculation. Connected to inputs via the for attribute.