HTML Tag Reference - HTML tag <meter>

The meter element shows a value from the range of possible values. The min and max attributes set the bounds for the range.

These can be expressed using floating-point numbers. The display for the meter element can be broken into three segments: too low, too high, and just right.

The low attribute sets the value considered to be too low, and the high attribute sets the value considered to be too high. The optimum attribute specifies the not-too-high-not-too-low value.

Browser compatibility

<meter> Yes No Yes Yes Yes

What's new in HTML5

The <meter> tag is new in HTML5.


Attribute Value Description
form form_id Set one or more owner forms for the <meter> element
high number Set the high range value
low number Set the low range value
max number Set the maximum value of the range
min number Set the minimum value of the range
optimum number Set the optimal value for the gauge
value number Required. Specifies the current value of the gauge

Global Attributes

The <meter> tag supports the Global Attributes in HTML.

Event Attributes

The <meter> tag supports the Event Attributes in HTML.

Default CSS Settings



        <meter id="mymeter" value="90" 
               min="10" max="100" low="40" high="80" optimum="60">
            <button type="button" value="30">30</button> 
            <button type="button" value="60">60</button> 
            <button type="button" value="90">90</button> 
            var buttons = document.getElementsByTagName('BUTTON'); 
            var meter = document.getElementById('mymeter'); 
            for (var i = 0; i < buttons.length; i++) { 
                buttons[i].onclick = function(e) { 
                    meter.value =; 
                }; <!--from  w  w w  .  j a v  a 2  s.  c om-->

Click to view the demo