meter

< html‎ | elements
Jump to: navigation, search

meter

This article is Almost Ready.


W3C Candidate Recommendation

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 <meter> elements itself.
Permitted parents Any element that can contain phrasing content.
Tag omission A <meter> 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. You should give a description of the meter within the tags, such as <meter min="0" max="10" value="5">5 out of 10 squares occupied</meter>. This meter can also have various attributes on it, such as the optimum, high and low values.

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

View live exampleA basic example of the meter element

HTML

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

View live exampleAn example of the meter element using all of its attributes

HTML

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

View live exampleStyling options for the meter bar

CSS

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

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

Specification Status Related Changes
HTML5.1 Editor's Draft
WhatWG HTML Living Standard Living Standard

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 6.0
16.0
10.0
11.0
5.2

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
?
?
16.0
Unsupported
11.0
?
Unsupported

See also

Related articles

HTML


















































… further results

Other articles

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article