From Web Education Community Group

Contents 1 <meter> 1.1 Point 1.2 HTML Attributes 1.3 Examples 1.3.1 Example A 1.3.2 Example B 1.3.3 Example of bad usage 1.4 HTML Reference

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

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.