<meter>: The HTML Meter element
===============================

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

Try it
------

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

This optional attribute is used to explicitly set a `<form>` owner for the `<meter>` element. If omitted, the `<meter>` is associated with its ancestor `<form>` element or the form association set by the `form` attribute on another ancestor element, such as on a `<fieldset>`, if any. If included, the value must be the `id` of a `<form>` in the same tree.

Examples
--------

### Simple example

#### HTML


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

![A screenshot of the meter element in Google Chrome](/en-US/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

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


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

![red meter in Google Chrome](/en-US/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-meter-element |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<progress>`
* `::-webkit-meter-bar`, `::-webkit-meter-inner-element`, `::-webkit-meter-even-less-good-value`, `::-webkit-meter-optimum-value`, `::-webkit-meter-suboptimum-value`: non-standard pseudo-elements