View video tutorial

HTML <meter> Tag


The <meter> tag is used to measure a value within a given range.

HTML <meter> Tag

The <meter> element represents either a scalar value within a given range or a fractional value.

The <meter> element is usually used to show a value of a result.

The <meter> element is not used to show variable values ​​or the progress of an action, use the progress tag instead.

Element Attributes

Attribute Value Description
form form_id This specifies which form the meter element belongs to.
high number This specifies the high end of the given range.
low number This specifies the low end of the given range.
max number It specifies the upper numerical limit of the given range. Default value is 1.
min number It specifies the lower numerical limit of the given range. Default value is 0.
optimum number This indicates the optimal numeric value for the gauge.
value number Required. This specifies the current numeric value.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.


<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="32">
    at 32/100
<label for="pressure">Pressure level:</label>
<meter id="pressure" min="0" max="100" low="33" high="60" optimum="55" value="42">
    42 psi
Try it Now »

Click on the "Try it Now" button to see how it works.