Home >Web >HTML reference – elements and attributes >meter – gauge

meter – gauge

<meter value="0.6" min="0" max="1">60%</meter>

A gauge: a value in a known range – how full a warehouse is, the occupancy of a course, a rating, password strength. Depending on the low, high and optimum attributes, the browser colors it green, yellow or red.

Default display: display: inline-block
End tag: required
Content: phrasing content without another meter
Where it can be used: anywhere phrasing content is allowed
DOM interface: HTMLMeterElement

Attributes

value – the value; min, max – the range (default 0 and 1).
low, high – the limits of low and high values.
optimum – the ideal value; from it the browser knows whether low or high values are good.

Examples

The occupancy of a baking course – high values are bad (few free places):

<label for="occupancy">Course occupancy</label>
<meter id="occupancy" value="11" min="0" max="12" low="6" high="10" optimum="2">11 of 12 places</meter>

The gauge is drawn by the operating system, which is why the example has no preview.

Accessibility

meter has the meter role. Not everyone perceives the color – write the value as text next to the gauge too.

Things to watch out for

The progress of a task (an upload) is progress, not meter.
meter without min and max assumes the range 0–1: value="60" shows a full gauge.

Browser support

Baseline – widely available: in all major browsers since March 2017, considered widely available since September 2019. Since version: Chrome 6, Firefox 16, Safari 6. As of October 2026 (MDN browser-compat-data).