References

Beginner-friendly references for web development, with live, editable examples.

The HTML <meter> tag

Element All modern browsers Updated
Quick answer

The HTML <meter> element represents a scalar measurement within a known range — disk usage, a score, a rating. Set value with min/max, and use low/high/optimum to color-code it. It is not for task progress — use <progress> for that.

Overview

The <meter> element is a gauge for a scalar value within a known range — how full a disk is, password strength, a quiz score, a rating out of five. You set the current value and the bounds with min and max.

What sets it apart is the low, high and optimum attributes, which let the browser color the gauge to signal whether the value is in a good, mediocre or poor range (commonly green, yellow, red). That makes it expressive for at-a-glance status, like a strength meter.

Crucially, it represents a static measurement, not how far along a task is — for task progress, use <progress> instead. As with progress, always include a text label so the value is also available in words for assistive technology.

Syntax

<meter min="0" max="100" low="30" high="70" optimum="90" value="85">85%</meter>

Attributes

The <meter> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
high A number within the meter's range. Sets the high boundary of a meter.
low A number within the meter's range. Sets the low boundary of a meter.
max A number or date, depending on the control. Sets the maximum allowed value.
min A number or date, depending on the control. Sets the minimum allowed value.
optimum A number within the meter's range. Sets the optimum value of a meter.
value A string or number, depending on the element and input type. Sets a control's value.

Example

Live example 
<label>Disk: <meter min="0" max="100" low="30" high="70" optimum="20" value="82">82%</meter></label>

Best practices

  • Set value, min and max to define the measurement and its range.
  • Use low, high and optimum so the browser can color the gauge meaningfully.
  • Use it for a measurement, not task progress — for that, use <progress>.
  • Include a visible text label so the value is conveyed in words too.

Frequently asked questions

What is the meter element for?
To display a scalar measurement within a known range — such as disk usage, password strength or a score.
What is the difference between meter and progress?
<meter> shows a measurement within a range; <progress> shows how far along a task is.
How do the low, high and optimum attributes work?
They divide the range into segments so the browser can color the gauge — for example green when the value is in the optimum zone and red when it is poor.
How do I style a meter?
Use CSS, including the ::-webkit-meter-bar and related pseudo-elements, to customize the track and value colors.
meta nav