Widely availableUse it for bounded measurements, ratings, and health-like values rather than task progress.
Data display Widely available

<meter>

The <meter> element represents a scalar value within a known range, such as a score, level, or measurement. It differs from progress because it shows a current state rather than completion over time.

DataMeasurementsStatus

Overview

The <meter> element represents a scalar value within a known range, such as a score, level, or measurement. It differs from progress because it shows a current state rather than completion over time.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<meter>
6
13
16
6
18
10.3
HTML attribute
high
6
13
16
6
18
10.3
low
6
13
16
6
18
10.3
max

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is…
6
13
16
6
18
10.3
min

The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.
6
13
16
6
18
10.3
optimum
6
13
16
6
18
10.3
value
6
13
16
6
18
10.3
DOM API
HTMLMeterElement

The HTML meter elements expose the HTMLMeterElement interface, which provides special properties and methods (beyond the HTMLElement object interface they also have available to them by inheritance) for manipulating the layout and presentation of meter elements.
6
13
16
6
18
6
high

The high property of the HTMLMeterElement interface represents the high boundary of the meter element as a floating-point number. It reflects the element's high attribute, or the value of max if not defined. The value of high is clamped by the low and max values.
6
13
16
6
18
6
labels

The HTMLMeterElement.labels read-only property returns a NodeList of the label elements associated with the meter element.
6
18
56
6
18
6
low

The low property of the HTMLMeterElement interface represents the low boundary of the meter element as a floating-point number. It reflects the element's low attribute, or the value of min if not defined. The value of low is clamped by the min and max values.
6
13
16
6
18
6
max

The max property of the HTMLMeterElement interface represents the maximum value of the meter element as a floating-point number. It reflects the element's max attribute, or the min value if no max is set, or 1 if neither the min or the max is defined.
6
13
16
6
18
6
min

The min property of the HTMLMeterElement interface represents the minimum value of the meter element as a floating-point number. It reflects the element's min attribute, or 0 if no min is defined.
6
13
16
6
18
6
optimum

The optimum property of the HTMLMeterElement interface represents the optimum boundary of the meter element as a floating-point number. It reflects the element's optimum attribute, or the midpoint between min and max values if not defined. The value of optimum is clamped by the min and max values.
6
13
16
6
18
6
value

The value property of the HTMLMeterElement interface represents the current value of the meter element as a floating-point number. It reflects the element's value attribute. If no value is set, it is the HTMLMeterElement.min value or 0, whichever is greater.
6
13
16
6
18
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<label>Disk usage:
  <meter value="70" min="0" max="100" low="30" high="80" optimum="50">70%</meter>
</label>

Live demo

basic me-ta-

Meter element in. rangeinside. scol-value ge-jdisplay.

PreviewFullscreen

value. settings

Low / high / optimum attribute in value. color in representationationation.

PreviewFullscreen

practical me-ta-display

stre-j or skillevell. Display to me-ta- usage.

PreviewFullscreen

Use cases

  • Scores and ratings

    Display values such as battery level, storage use, or user rating within a clear scale.

  • Measured states

    Represent quality, intensity, or range-based metrics that are not about completion.

Cautions

  • meter is not a generic progress bar and should not be used for loading or task completion indicators.
  • Range, optimum, and threshold values should be chosen carefully so the visual meaning stays understandable.

Accessibility

  • Users need a textual label and understandable scale context, not just a colored bar or gauge.

Related links

Powered by web-features