The <meter> element represents a scalar measurement within a known range, or a fractional value.
- 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.
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.
See also global attributes.
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>
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>
The HTML5 specification defines the <meter> element in 4.10.17 The meter element.