<meter> Meter
A gauge for a value inside a known range, such as battery level.
<meter> displays a measurement within a known range: battery level, disk usage, a rating, a share of the vote. Set value, min and max.
low, high and optimum tell the browser which part of the range counts as good or bad, and many browsers change the bar's color to match. Task progress is a different thing and goes in <progress>.
How low, high and optimum set the colored regions is explained in the meter element definition (opens in a new tab). Compare it with the progress element.
Syntax
<label for="id">Measure</label>
<meter id="id" min="0" max="100" value="40">40%</meter>When to use it
Phone storage used, password strength, a rating out of five, a poll result, how full a car park is: each is one value in a known range that people read at a glance. That is what <meter> shows. The range and its good and bad zones are part of the data.
A number that tracks how far a task has got calls for progress. Values with no sensible maximum, like a person's height or a page view count, do not suit a meter at all, so write them as text. To compare lots of values side by side, use a small table or a chart. A row of gauges says less.
Decide which end is the good one. Put optimum near the top and high values count as good, which is right for battery charge. CPU load and failed logins are the reverse, so optimum goes at the low end. Get it wrong and the browser may paint a dangerous value as healthy. Meters clamp values to min and max and cannot show an overload, so state that in text.
Attributes
| Attribute | What it does |
|---|---|
value | Current value (required). |
min | Lower bound (default 0). |
max | Upper bound (default 1). |
low | Upper limit of the low range. |
high | Lower limit of the high range. |
optimum | The best value. |
Live example
Edit the code and watch the preview.
<label for="bat">Battery</label>
<meter id="bat" min="0" max="100" low="20" high="80" optimum="100" value="15">15%</meter>
<label for="disk">Disk used</label>
<meter id="disk" value="0.6">60%</meter>More examples
Lower is better
With server load, the lower the better. optimum="0" passes that on to the browser, which shows anything above high in the worst region, usually red. The text below gives the value and says it is too high.
<label for="cpu">CPU load</label>
<meter id="cpu" min="0" max="100" low="60" high="85" optimum="0" value="92">92%</meter>
<p>92% - too high, check running jobs.</p>Rating out of five
Ratings run from 0 to 5, a fixed range, so a meter is a good match. The value can be a decimal. The label spells out the rating too, and nobody has to squint at the gauge.
<p>
<label for="rating">Average rating: 4.2 out of 5</label>
<meter id="rating" min="0" max="5" value="4.2">4.2 out of 5</meter>
</p>
<p>Based on 318 reviews.</p>Tip: Write the value as text between the tags as well.
Browser support
meter works in all current browsers and is in the HTML Living Standard. Internet Explorer never had it. Each browser colors the low, high and optimum regions its own way, and full restyling is not possible everywhere. Show the value in text as well (see meter element support (opens in a new tab)).
Accessibility
Meter colors alone cannot signal a good or bad value. Show the value and what it means in text too (WCAG 1.4.1). The accessible role is described in the W3C meter pattern (opens in a new tab).
Common mistakes
Wrong
<meter value="7"></meter>Right
<label for="disk">Disk usage</label>
<meter id="disk" value="7" min="0" max="10">7 of 10 GB</meter>Leave out min and max and the range is 0 to 1. Add text content and a label.
Frequently asked questions
What do low, high and optimum do on meter?
They split the range between min and max into regions. low and high mark where the low and high regions start, and optimum says which region is best. Browsers then color the bar green, yellow or red depending on whether the value sits in the preferred region, which is how a battery at 10 percent ends up red.
Can I use meter as a progress bar?
No. A meter is a gauge for a measurement, such as storage used or a rating, and it has no indeterminate state. Progress toward finishing a task, like a download or an installation, belongs in <progress>. Screen readers also expose the two with different roles.