How to Use the meter Element

The HTML meter element represents a measurement within a known range, such as disk usage or a score.

The short answer

Minimal example

<label for="storage-meter">Storage usage</label>
<meter id="storage-meter" min="0" max="100" value="72">72 / 100</meter>

value="72" is the current value and max="100" is the upper bound. The text inside the element is useful as fallback text and as a readable representation of the state.

Try it

Moving the slider lets JavaScript update meter.value. The meter element does not measure anything by itself; the application supplies the measurement. In this example, lower usage is treated as the optimum, with 50 and 80 marking the low and high boundaries.

meter and progress

• meter — a measurement within a known range, such as usage, temperature, rating, or turnout.
• progress — how much of a task, such as an upload, is complete.
• output — the result of a calculation or user action.

For example, the percentage of a download that is complete is task progress and belongs to progress. The amount of disk space used out of a known capacity is a bounded measurement and belongs to meter.

The six attributes

Attribute	Purpose	Example
min	Lower bound. Defaults to 0.	min="0"
max	Upper bound. Defaults to 1.	max="100"
value	Current measurement. It should be specified.	value="72"
low	Upper boundary of the low range.	low="50"
high	Lower boundary of the high range.	high="80"
optimum	Position considered optimal.	optimum="20"

low, high, and optimum also describe whether a value is good or bad. The position of optimum tells whether lower values, higher values, or the middle of the range is preferred.

Define the range carefully

If you omit min and max, the range is 0–1. If you intend to show a percentage out of 100, do not omit max and then set value="72"; define the same scale in the markup.

<meter min="0" max="100" value="72">72%</meter>
<meter min="0" max="1" value="0.72">72%</meter>

When a value is outside the range, the browser resolves the actual gauge value within the range. If your application validates values itself, preserve the relationship min ≤ low ≤ high ≤ max.

Forms and submission

meter displays a measurement; it is not a form submission control. If a value must be submitted, keep a separate input type="hidden" synchronized with the displayed meter.

<meter id="quota-meter" min="0" max="100" value="72">72%</meter>
<input type="hidden" name="quota" value="72">

Make it clear and understandable

• Use a label or another clear name to explain what is measured.
• Show the number and unit in nearby text as well as in the gauge.
• Do not communicate low, high, or optimum only through color.
• Keep fallback text available for browsers and reading contexts that do not use the native rendering.
• When the value changes, keep the displayed measurement synchronized with the real data.

Common mistakes

• Using meter for task progress.
• Omitting max while supplying a value intended to be out of 100.
• Relying on colors without checking the meaning of low, high, and optimum.
• Assuming that a meter value is submitted with a form.

Continue in Atlas

For categories, value resolution, HTMLMeterElement, HTML-AAM, and open implementation questions, see the meter element in Yugien Atlas. For the semantic boundary, also see the progress element and the output element.