Web/HTML/Element/meter

The HTML <meter> element represents either a scalar value within a known range or a fractional value.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
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 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.

Note: Unless the 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

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

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, the high 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 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. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value.

form

The <form> element to associate the <meter> element with (its form owner). The value of this attribute must be the id of a <form> in the same document. If this attribute is not set, the <meter> is associated with its ancestor <form> element, if any. This attribute is only used if the <meter> element is being used as a form-associated element, such as one displaying a range corresponding to an <input type="number">.

Examples

Simple example

HTML

<p>Heat the oven to <meter min="200" max="500"
  value="350">350 degrees</meter>.</p>

Result

On Google Chrome, the resulting meter looks like this:

current look of <meter> in google chrome

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

<p>He got a <meter low="69" high="80" max="100"
  value="84">B</meter> on the exam.</p>

Result

On Google Chrome, the resulting meter looks like this:

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2020/10/12/17400/cc07b5c392e78497d8de458b360a6e55/Screen_Shot_2020-10-12_at_10.11.52_PM.png|red meter in google chrome]]

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<meter>' in that specification.	Living Standard
HTML5The definition of '<meter>' in that specification.	Recommendation	Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
meter	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
form	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
high	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
low	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
max	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
min	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
optimum	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0
value	Chrome Full support 6	Edge Full support ≤18	Firefox Full support 16	IE No support No	Opera Full support 11	Safari Full support 6	WebView Android No support No	Chrome Android Full support 18	Firefox Android Full support 16	Opera Android Full support 11	Safari iOS Full support 10.3	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

No support  

No support

See also

• <progress>

<meter>: The HTML Meter element by Mozilla Contributors is licensed under CC-BY-SA 2.5.