<meter>

The meter tag, or HTML Meter element, is used to designate a scalar measurement within a known range, or a fractional value.

Syntax

For best accessibility practices, the <label> tag should always be added. For progress bars, use the <progress> tag instead of <meter>.

<label for="first_meter">First Meter:</label>
<meter id="first_meter" value="3" min="0" max="5">3 out of 5</meter>

<label for="second_meter">Second Meter:</label>
<meter id="second_meter" value="36" min="0" max="10">6 out of 10</meter>

Attributes

form
Provides the id of the form that the <meter> tag is a part of.

high
Designates the range that is weighed to be a high value.

low
Designates the range that is weighed to be a low value.

max
Designates the maximum value of the range.

min
Designates the minimum value of the range.

optimum
Designates the optimal value for the gauge.

value
This required attribute provides the current value of the gauge.

Browser Compatibilty

Demos

Have a code example of <meter>? Submit a codepen.io demo and we'll showcase it here ↴