The HTML <meter>
element 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 |
Attributes
This element includes the global attributes.
value
- The current numeric value. This must be between the minimum and maximum values (
min
attribute andmax
attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by themin
attribute andmax
attribute, the value is equal to the nearest end of the range.Usage note: Unless thevalue
attribute is between0
and1
(inclusive), themin
andmax
attributes should define the range so that thevalue
attribute's value is within it. min
- The lower numeric bound of the measured range. This must be less than the maximum value (
max
attribute), if specified. If unspecified, the minimum value is 0. max
- The upper numeric bound of the measured range. This must be greater than the minimum value (
min
attribute), if specified. If unspecified, the maximum value is 1. low
- The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (
min
attribute), and it also must be less than the high value and maximum value (high
attribute andmax
attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, thelow
value is equal to the minimum value. high
- The lower numeric bound of the high end of the measured range. This must be less than the maximum value (
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, thehigh
value is equal to the maximum value. optimum
- This attribute indicates the optimal numeric value. It must be within the range (as defined by the
min
attribute andmax
attribute). When used with thelow
attribute andhigh
attribute, it gives an indication where along the range is considered preferable. For example, if it is between themin
attribute and thelow
attribute, then the lower range is considered preferred. form
- This attribute associates the element with a
form
element that has ownership of themeter
element. For example, ameter
might be displaying a range corresponding to aninput
element oftype
number. This attribute is only used if themeter
element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of aform
element.
Examples
Simple example
HTML content
<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
Output
On Google Chrome, the resulting meter looks like this:
High and Low range example
Note that in this example the min attribute is omitted; this is allowed, as it will default to 0.
HTML content
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
Output
On Google Chrome, the resulting meter looks like this:
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of '<meter>' in that specification. |
Living Standard | |
HTML5 The definition of '<meter>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|---|
Basic support | 6.0 | (Yes) | 16.0 (16.0) | No support | 20[1] | 11.0 | 5.2 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Edge Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | No support | (Yes) | 16.0 (16.0) | No support | 20[1] | 11.0 | No support |
[1] See the Microsoft Edge Platform Status page.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
sideshowbarker,
libbymc,
Sebastianz,
suttlecommakevin,
brunoais,
teoli,
tagawa,
kscarfone,
Pruthvi,
tregagnon,
Sheppy,
medicdude,
ethertank,
Jeremie,
ysangkok,
trevorh,
McGurk,
jkleinert,
cers,
fscholz,
hobophobe
Last updated by:
sideshowbarker,