skip to content

HTML <meter> Tag

This week's article in the installment "what's that weird html tag?", takes a look at the <meter> tag.

The <meter> element represents a scalar measurement within a known range, for example disk usage. It should not be used to create progress bars or in any other way indicate progress. Use the progress bar element instead.


There are five pseudo classes you can use for styling the meter element -webkit-meter-inner-element -webkit-meter-bar -webkit-meter-optimum-value -webkit-meter-suboptimum-value -webkit-meter-even-less-good-value


Additional markup to render the meter element as read-only.


The meter bar container. This is used for styling the meter element.

<meter min="0" max="10" value="3">3 out of 10</meter>
meter::-webkit-meter-bar {
 background: salmon;

3 out of 10


This is the current value of the meter. It's green by default when the value falls within the low-high range.

<meter min="0" max="10" value="3" optimum="0">3 out of 10</meter>
meter::-webkit-meter-optimum-value {
 background: green;

3 out of 10


Gives a yellow color to the meter element when the value attribute falls outside the low-high range.

<meter min="0" max="10" value="6" optimum="0" low="5">6 out of 10</meter>
meter::-webkit-meter-suboptimum-value {
 background: yellow;

6 out of 10


Gives a red color to the meter element when the value and the optimum attributes fall outside the low-high range but in opposite zones. For example, value < low < high < optimum or value > high > low > optimum

<meter min="0" max="10" value="9" optimum="0" low="5" high="8">
 9 out of 10
meter::-webkit-meter-suboptimum-value {
 background: red;

9 out of 10


See the Pen Meter HTML Test by Tristan White (@triss90) on CodePen.

Browser Support

The <meter> tag is widely supported, only lacking support on IE and IE Mobile:

Method of indicating the current level of a gauge.