Learn the semantic HTML elements for displaying measurements, progress indicators, and calculated results: meter, progress, and output.
The <progress> element represents the completion progress of a task.
<progress value="70" max="100">70%</progress>value — Current progress.max — Maximum value (defaults to 1 if omitted).Omit the value attribute to show an animated indeterminate indicator:
<progress>Loading...</progress>Browsers render this as a pulsing or cycling animation, indicating that work is in progress but the completion percentage is unknown.
Always add a text label near the progress bar so all users (including screen reader users) understand what is being tracked.
The <meter> element represents a scalar measurement within a known range — like disk usage, a test score, or a relevance rating. It is not for progress; use <progress> for that.
| Attribute | Description |
|---|---|
value | Current value (required) |
min | Minimum bound (default: 0) |
max | Maximum bound (default: 1) |
low | Below this = "low" range |
high | Above this = "high" range |
optimum | The ideal value |
The browser colours the meter bar differently based on where value falls relative to low, high, and optimum:
<!-- Disk usage: 80% — in the high/warning zone -->
<meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="0.2">
80% full
</meter>The <output> element represents the result of a calculation or user action. It is a live region — screen readers announce changes to its content.
for attributeThe for attribute lists the IDs of elements that contributed to the result, establishing a relationship:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>The <output> element:
role="status" — changes are announced by screen readers.name attribute for form submission.<h3>Dashboard</h3>
<!-- Progress: file upload -->
<label for="upload">Upload progress:</label>
<progress id="upload" value="65" max="100">65%</progress>
<span>65%</span>
<!-- Meter: disk usage -->
<label for="disk">Disk usage:</label>
<meter id="disk" value="0.7" min="0" max="1"
low="0.3" high="0.7" optimum="0.2">70%</meter>
<span>70%</span>
<!-- Meter: test score (good) -->
<label for="score">Test score:</label>
<meter id="score" value="85" min="0" max="100"
low="40" high="70" optimum="100">85/100</meter>
<span>85/100</span>
<!-- Output: calculation -->
<form oninput="total.value = parseInt(price.value) * parseInt(qty.value)">
<label>Price: <input type="number" id="price" value="10"></label>
<label>Qty: <input type="number" id="qty" value="3"></label>
<p>Total: <output name="total" for="price qty">30</output></p>
</form>What is the key difference between <progress> and <meter>?