The <meter>
represents either a scalar value within a known range or a fractional value.
Content categories | Flow content, phrasing content, labelable content, palpable content. |
---|---|
Permitted content |
Phrasing content, but there must be no <meter> element among its descendants. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts phrasing content. |
Permitted ARIA roles | None |
DOM interface | HTMLMeterElement |
This element includes the global attributes.
value
min
attribute and max
attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min
attribute and max
attribute, the value is equal to the nearest end of the range. value
attribute is between 0
and 1
(inclusive), the min
and max
attributes should define the range so that the value
attribute's value is within it.min
max
attribute), if specified. If unspecified, the minimum value is 0.max
min
attribute), if specified. If unspecified, the maximum value is 1.low
min
attribute), and it also must be less than the high value and maximum value (high
attribute and max
attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low
value is equal to the minimum value.high
max
attribute), and it also must be greater than the low value and minimum value (low
attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high
value is equal to the maximum value.optimum
min
attribute and max
attribute). When used with the low
attribute and high
attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min
attribute and the low
attribute, then the lower range is considered preferred.form
form
element that has ownership of the meter
element. For example, a meter
might be displaying a range corresponding to an input
element of type
number. This attribute is only used if the meter
element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a form
element.<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
On Google Chrome, the resulting meter looks like this:
Note that in this example the min attribute is omitted; this is allowed, as it will default to 0.
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
On Google Chrome, the resulting meter looks like this:
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<meter>' in that specification. | Living Standard | |
HTML5 The definition of '<meter>' in that specification. | Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 6 | Yes | 16 | No | 11 | 6 |
form |
6 | Yes | 16 | No | 11 | 6 |
high |
6 | Yes | 16 | No | 11 | 6 |
low |
6 | Yes | 16 | No | 11 | 6 |
max |
6 | Yes | 16 | No | 11 | 6 |
min |
6 | Yes | 16 | No | 11 | 6 |
optimum |
6 | Yes | 16 | No | 11 | 6 |
value |
6 | Yes | 16 | No | 11 | 6 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | ? | Yes | 16 | 11 | No | ? |
form |
No | ? | Yes | 16 | 11 | No | ? |
high |
No | ? | Yes | 16 | 11 | No | ? |
low |
No | ? | Yes | 16 | 11 | No | ? |
max |
No | ? | Yes | 16 | 11 | No | ? |
min |
No | ? | Yes | 16 | 11 | No | ? |
optimum |
No | ? | Yes | 16 | 11 | No | ? |
value |
No | ? | Yes | 16 | 11 | No | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter