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:

 

›› go to examples ››