<meter>

The <meter> element represents a scalar measurement within a known range, or a fractional value.

Point

• Example of meter:
  • disk usage
  • relevance of a query result
  • fraction of a voting population to have selected a particular candidate ...

• The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.

• The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value. [Example of bad usage]

• Authors are encouraged to include a textual representation of the gauge's state in the element's contents, for users of user agents that do not support the meter element.

HTML Attributes

• value = valid floating point numbers
  Specifies the value to have the gauge indicate as the "measured" value.
  The value attribute must be specified.

• min = valid floating point numbers
  Specifies the lower bound of the range.

• max = valid floating point numbers
  Specifies the upper bound

• low = valid floating point numbers
  Specifies the range that is considered to be the "low" part.

• high = valid floating point numbers
  Specifies the range that is considered to be the "high" part.

• optimum = valid floating point numbers
  Gives the position that is "optimum":
  • If that is higher than the "high" value then this indicates that the higher the value, the better
  • if it's lower than the "low" mark then it indicates that lower values are better
  • if it is in between then it indicates that neither high nor low values are good.

• form = the ID of a form element in the element's owner
  Associate the meter element with its form owner.
  By default, the meter element is associated with its nearest ancestor form element.

See also global attributes.

Examples

Example A

The following examples show three gauges that would all be three-quarters full [try it]:

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>

Example B

There is no explicit way to specify units in the meter element, but the units may be specified in the title attribute in free-form text [try it]:

<dl>
  <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
  <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
</dl>

Example of bad usage

The following example is incorrect use of the element, because it doesn't give a range (and since the default maximum is 1, both of the gauges would end up looking maxed out)

<!-- do not copy this example, it is an example of bad usage! -->
<p>The grapefruit pie had a radius of <meter value=12>12cm</meter>
and a height of <meter value=2>2cm</meter>.</p>

HTML Reference

The HTML5 specification defines the <meter> element in 4.10.17 The meter element.