Meter element (<meter>)

The <meter> element is used to present a so called scalar measurement that must be within a given range or made of a fractional value.

It is important not to mix the <meter> element with the <progress> element. The second one represent a general progress bard, while the <meter> should be used a gauge or a relevant measurement of a certain, i.e., data query or other measurable indicator.

The value of a <meter> element may be updated by using its own attributes (such as high or low), or by using a JavaScript code that will react to certain events.

Syntax:

<meter></meter>

Attributes:

value - This value is required and it specifies a current value (as a number) of the gauge (<meter>).
min - Defines the minimum value of the gauge's range. If omitted it will be '0'.
max - Defines the maximum value of the gauge's range. If omitted it will be '1'.
high - Defines a high value of the range and it is not required.
low - Defines a low value of the range and it is not required.
optimum - Defines what value is considered as optimal for the range.
form - Specifies one or more of the forms (<form>) that the meter will be assigned to. The value must be a form id attribute; if more than one than they are separated by comma.
global attributes
event attributes

Example

The example with HTML5 meter element:

<html>
<head>
<style type="text/css">
p {background-color:#eee; margin:10px 0px; padding:4px;}
p:nth-of-type(2n) {background-color:#fff;}
meter {height:20px; width:98%; margin-top:5px;}
</style>
</head>
<body>
<p>Display 2 meters with different settings:</p>
<p><meter value="3" min="0" max="10">2 out of 10</meter><br />
<meter value="0.9"></meter></p>
<p><em>p.s. This example does not use any scripting.</em></p>
</body>
</html>

›› go to examples ››

Meter element (<meter>)

Syntax:

Attributes:

Example

The example with HTML5 meter element:

Comments

About

Contact

Get Connected