Purpose and content model
Output represents the result of a calculation or user action. Meter represents a measurement within a known range, such as storage usage. Progress represents completion of a task. These are different concepts: a battery level is a measurement, while a file upload has progress toward completion.
All three can have useful text alternatives or labels. Output does not calculate by itself; application code or a server supplies its content. Progress without a value represents an indeterminate task, not zero percent. Meter is inappropriate when the range is unknown or the display actually represents task completion.
Syntax and working example
<label for="upload-progress">Upload progress</label>
<progress id="upload-progress" value="35" max="100">35%</progress>
<p>35 of 100 files uploaded.</p>Supported attributes and behavior
Output uses for to identify related control IDs, form for association, and name for identification; its value is not a normal submitted successful-control value. Meter supports value, min, max, low, high, and optimum. Progress uses value and max, with an implicit minimum of zero. Values and thresholds must form a coherent range. A label can name these labelable elements.
Another practical pattern
<label for="storage">Storage used</label>
<meter id="storage" min="0" max="100" low="50" high="80" optimum="20" value="65">65%</meter>
<p>Total: <output id="total" for="quantity price">240</output> rupees</p>Accessibility and browser notes
Provide a readable explanation of the measurement or task and its units. Do not rely only on green, yellow, and red styling. Announce meaningful progress changes without flooding a live region on every tiny increment. An output may receive status-related accessibility behavior, so test announcements before layering more live regions.
Common mistakes
Do not use meter as a generic loading spinner or progress as a decorative rating bar. Omitting value from progress means indeterminate, while setting value=0 means a determinate task at the start. Thresholds that contradict the actual desirable range mislead readers.
Verify your implementation
Test the start, middle, complete, and indeterminate states of a task. Verify measurement boundaries and units. Compare the visible text, element attributes, and spoken announcement so they agree, including when the operation fails or is cancelled.
Standard status and sources
Standard; browser availability must be checked independently of specification status.