HTML/Elements/meter

From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search

<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.


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>

Meter01.png

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.