HTML: meter
The <meter> element displays a measurement within a known minimum and maximum range.
What you will learn
- How to show a value with min, max, and value
- How meter differs from progress
- How to give a gauge a useful name
Basic example
<label for="score">Score</label>
<meter id="score" min="0" max="100" value="82">
82 out of 100
</meter>The value is 82 within the range from 0 to 100. The text inside the element provides a fallback and context.
Meter or progress?
Use meter for a measurement such as a score, battery level, or storage usage. Use progress when a task is moving toward completion, such as an upload.
Optional thresholds
<meter min="0" max="100" low="30" high="70" optimum="90" value="25">
25 out of 100
</meter>Threshold attributes can describe whether a value is low or high, but do not rely on color alone to communicate the meaning.
Common mistakes
- Do not use meter as a progress bar for an unfinished task.
- Set a clear minimum, maximum, and current value.
- Provide a visible label or other accessible name for the measurement.