meter

Summary

The HTML <meter> element represents a value within a specified range. This value can be any real number.

Overview Table

DOM Interface

HTMLMeterElement

Permitted contents	Phrasing content, but may not contain any `` elements itself.
Permitted parents	Any element that can contain phrasing content.
Tag omission	A `` element must have both a start tag and an end tag.

The meter element defines a value between a minimum or maximum. This can be used for fundraisers, test results, or a number of other things. It should not be used as a progress bar. For that, use the [progress element](/html/elements/progress). You should give a description of the meter within the tags, such as `5 out of 10 squares occupied`. This meter can also have various attributes on it, such as the optimum, high and low values.

The content of the meter element should represent the set min/max/value attributes in human readable form. This will be picked up by assistive technologies as well as act as a fallback for browsers not supporting the element.

Attributes

This element supports the HTML5 global attributes.

value

The current value of the meter. If there is no value specified, or if the value is incorrectly formatted, it defaults to 0. This value must be between the min and max values of the element. If not, it will default to the closest available value within the ranges.
optimum

The optimum, or goal value of the meter. For example, on a test score, this would be 100. Or, on a fundraiser, this may be a monetary value. This must be below the max value and above the min value.
min

The minimum value of the meter. This must be less than the max attribute value. If this attribute is not present, it defaults to 0.
max

The maximum value of the meter. This must be greater than the min attribute value. If this attribute is not present, it defaults to 1.
low

The low value is what is considered a low range for the meter. In the example of a fundraiser, it may be near the starting value. This must be greater than the min and less than the max and high values. If unspecified, it defaults to 0.
high

The high value is what is considered a high range for the meter. In the example of a fundraiser, it may be near the goal value. This must be less than the max and greater than the min and low values. If unspecified, it defaults to 1.

Examples

A basic example of the meter element

<meter min="0" max="10" value="5">5 out of 10</meter>

View live example

An example of the meter element using all of its attributes

<meter min="0" max="1000" value="500" low="200" high="800" optimum="900">$500 raised</meter>

View live example

Styling options for the meter bar

meter {
  -webkit-appearance: none;
}

meter::-webkit-meter-bar {
  border: 2px solid black;
}

meter::-webkit-meter-bar {
  background: lightblue;
}

meter::-webkit-meter-optimum-value {
  background: green;
}

meter::-webkit-meter-suboptimum-value {
  background: orange;
}

meter::-webkit-meter-even-less-good-value {
  background: red;
}

View live example

Usage

 The meter element is intended to have descriptive text inside of it, similar to the alt tag of the image element.

The title attribute may be used to specify a unit.

Related specifications

HTML 5.1

W3C Working Draft

HTML 5

W3C Recommendation

See also

Other articles

• HTML5 progress element

Attributions

• Mozilla Developer Network : Article