HTML tagForms

<meter>

A gauge for a value within a known range: disk space used, a test score, battery level.

Display: inline-block
Closing tag: Required
Permitted content: Phrasing content without other <meter> elements

On this page

Example
Definition and usage
Syntax
Attributes
Attributes in practice
Browser support
Good practices
Related entries

Example

HTML

<p>
  <label for="score">CSS test score</label>
  <meter id="score" min="0" max="100" value="72">72 out of 100</meter>
  72/100
</p>
<p>
  <label for="disk">Space for projects</label>
  <meter id="disk" value="0.8">80%</meter>
  80% used
</p>

Preview

Definition and usage

The <meter> element shows a measurement within a given range, a bit like a car’s fuel gauge. You give a value (value) and the bounds (min and max), and the browser draws a bar filled in proportion to the result.

The low, high and optimum attributes split the range into zones and say which values are good. The browser then colors the bar: usually green when the value is in the optimal zone, yellow for an average value, and red when it’s bad.

Don’t confuse it with <progress>. <meter> shows a state (how much space files take up), while <progress> shows a task’s progress over time (how much of a file has uploaded so far). Just like a progress bar, <meter> needs a label.

Syntax

<meter value="0.6">60%</meter>

Attributes

value
number
The measured value. It should fall between min and max; the browser clamps values outside the range to the limits.
min / max
number (0 and 1 by default)
The bounds of the range. They let you give values in natural units, for example test points from 0 to 40, or megabytes.
low / high
number within the range
low sets the upper bound of the low-value zone, and high the lower bound of the high-value zone. A value between them is average. In the example, the same battery gauge changes color depending on the zone.
optimum
number within the range
The ideal value. If it lies in the high zone, high results are good (like battery charge), and if in the low zone, low results are good (like the number of bugs in code). The bar’s color depends on this.

Attribute	Values	Description
value	number	The measured value. It should fall between `min` and `max`; the browser clamps values outside the range to the limits.
min / max	number (0 and 1 by default)	The bounds of the range. They let you give values in natural units, for example test points from 0 to 40, or megabytes.
low / high	number within the range	`low` sets the upper bound of the low-value zone, and `high` the lower bound of the high-value zone. A value between them is average. In the example, the same battery gauge changes color depending on the zone.
optimum	number within the range	The ideal value. If it lies in the high zone, high results are good (like battery charge), and if in the low zone, low results are good (like the number of bugs in code). The bar’s color depends on this.

The element also supports all global attributes, such as class, id, style and hidden.

Attributes in practice

value

number

The measured value. It should fall between min and max; the browser clamps values outside the range to the limits.

HTML

<p><meter value="0.25">25%</meter> 25%</p>
<p><meter value="0.5">50%</meter> 50%</p>
<p><meter value="0.9">90%</meter> 90%</p>

Preview

min / max

number (0 and 1 by default)

The bounds of the range. They let you give values in natural units, for example test points from 0 to 40, or megabytes.

HTML

<p>Quiz points: <meter min="0" max="40" value="31">31 of 40</meter> 31 of 40</p>

Preview

low / high

number within the range

low sets the upper bound of the low-value zone, and high the lower bound of the high-value zone. A value between them is average. In the example, the same battery gauge changes color depending on the zone.

HTML

<p>Battery 90% <meter min="0" max="100" low="20" high="80" optimum="100" value="90"></meter></p>
<p>Battery 50% <meter min="0" max="100" low="20" high="80" optimum="100" value="50"></meter></p>
<p>Battery 10% <meter min="0" max="100" low="20" high="80" optimum="100" value="10"></meter></p>

Preview

optimum

number within the range

The ideal value. If it lies in the high zone, high results are good (like battery charge), and if in the low zone, low results are good (like the number of bugs in code). The bar’s color depends on this.

HTML

<p>Bugs in the code: 2 <meter min="0" max="20" low="5" high="10" optimum="0" value="2"></meter></p>
<p>Bugs in the code: 15 <meter min="0" max="20" low="5" high="10" optimum="0" value="15"></meter></p>

Preview

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Color can’t be the only cue. Show a number or a description next to the gauge too, because not everyone can tell green from red.
For progress bars (uploading, installing, finishing a course), use <progress>, not <meter>.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice HTML in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course