A product page shows remaining stock as a coloured gauge, a report card shows a mark out of 20, a dashboard shows disk space used on a server. These three pieces of information share something: they are fixed measurements, taken at a given moment, sitting between a minimum and a maximum known in advance. Colouring a plain <div> with CSS to represent that number works visually, but tells a screen reader or a search engine nothing at all.
The <meter> tag was built for exactly this case: giving meaning to a bounded numeric value, without standing in for a progress gauge.
Definition
<meter> represents a scalar measurement inside a scale known in advance. Thanks to its attributes, the browser knows where the value sits between a minimum and a maximum, and can even judge whether it falls in a zone considered low, high or optimal. None of this is visual by default, the appearance stays a plain grey bar, but the meaning carried by the tag is immediately available to assistive technology and to the browser itself.
What <meter> never represents is a task in the middle of running. A battery level at 40% is a measurement. A download at 40% is a task under way, and belongs to <progress>.
Syntax and attributes
Five numeric attributes are enough to fully describe a gauge. None is required besides value, but leaving the others at their defaults deprives the browser of useful information.
| Attribute | Role |
|---|---|
value | The current measurement, the only attribute that truly matters |
min | The lower bound of the scale, 0 by default |
max | The upper bound of the scale, 1 by default |
low | The threshold below which the value counts as low |
high | The threshold above which the value counts as high |
optimum | The ideal zone, which decides whether low or high is good or bad news |
The optimum attribute deserves a word of explanation, since it can flip the meaning of low and high. For a battery level, a high value is desirable, so the optimum sits on the high side. For an error rate, it is the opposite: the optimum sits on the low side, and most browsers then colour the gauge red as the value climbs.
Concrete example
Here is a stock gauge shown on a product page, with a warning threshold set at ten units.
<label for="stock">Stock available</label>
<meter id="stock" min="0" max="100" low="10" high="60" optimum="100" value="8">
8 items left
</meter>The content placed between the opening and closing tags, here 8 items left, only shows up in browsers too old to understand <meter>. It is worth writing it out in full rather than leaving it empty.
Difference with <progress>
The two tags look alike at first glance: a bar, a value, a maximum. The distinction, though, comes down to a simple question: does the value move mechanically toward its maximum, or does it represent a state measured at one point in time? A download, a step in a multi-page form, or a software update installing all move toward completion: that is <progress>. A battery level, an exam mark or a fill rate are measurements: that is <meter>.
The most common mix-up is using <meter> for a loading bar. The browser does not object technically, but assistive technology then announces a static measurement where the user expects a status that keeps changing, and the optimum attribute simply makes no sense for a task under way.
Semantics and accessibility
A screen reader that meets <meter> announces a dedicated role, the current value and where it sits against the minimum and maximum, with no ARIA attribute needed. A <div> dressed up in CSS to look like a gauge offers none of that by default: role="meter" and several aria-* attributes would need to be rebuilt by hand to reach what <meter> gives for free.
Always pair the gauge with a <label> or explicit text: the value alone, with no unit or context, tells someone who cannot see the rendered colour nothing at all.
Frequently asked questions
meter tag be styled visually?Yes, through CSS pseudo-elements such as ::-webkit-meter-bar and related ones, but the result varies noticeably between browsers and the control stays partial compared with a gauge redrawn entirely in CSS or SVG. Many projects settle for the native rendering, which is enough for an internal dashboard.
value is higher than max?The browser silently clamps the display to the maximum bound, with no error and no console warning. A miscalculated value coming from the server therefore produces a full gauge rather than a crash, which can hide an upstream calculation bug if nobody checks the numbers being sent.
meter work for a mark out of 20 or a star rating?For a numeric mark shown read only, yes: min="0" max="20" value="14" describes exactly a mark of 14 out of 20. For a clickable star rating used to submit a rating, though, a group of radio buttons remains more suitable, since <meter> is never interactive.