The <meter> tag in HTML5

, by

Example

<p>Items available :</p>
<meter min='0' value='10' max='30'>10 items out of 30 available</meter>

It is

a measurement between known minimum and maximum values. You can use it to illustrate a hard drive space or a vote result.

We could write this :

<meter value='0.333'>10 items out of 30 available</meter>
<meter value='10' max='30'>10 items out of 30 available</meter>

It is not

  • a progress bar. There’s a special tag for that : <progress>
  • to report a value if you don’t know the range.

So we can’t write this :

<meter value='10'>10 items</meter>

Recommendations

  • The value attribute has to be specified.
  • The content of the tag can’t be empty
  • The best way of giving a value is to include it as contents of the element :
<p>Items available :</p>
<meter min='0' value='10' max='30'>1/3 of items available</meter>

Attributes

  • value = the “measured” value. Must be specified.
  • min = the minimum value of the range
  • max = the maximum value of the range
  • low = the range considered as the “low” part
  • high = the range considered as the “hight” part
  • optimum = the best range
  • form = the ID of a form element. It is, by default, associated with its ancestor form element.

low, high and optimum

if value is lower than low, the gauge is orange :

<meter min='0' value='15' max='30' low='10'>1/2 of items</meter>
<meter min='0' value='5' max='30' low='10'>1/6 of items</meter>

if value is higher than high, the gauge is orange :

<meter min='0' value='15' max='30' high='20'>1/2 of items</meter>
<meter min='0' value='25' max='30' high='20'>25/30 of items</meter>

Basically the gauge becomes green when value is close to optimum so :

When value is lower than low, if optimum is lower than low, the gauge is green :

<meter min='0' value='15' low='10' max='30' optimum='5'>1/2 of items</meter>
<meter min='0' value='6' low='10' max='30' optimum='5'>1/5 of items</meter>
<meter min='0' value='3' low='10' max='30' optimum='5'>1/10 of items</meter>

When value is higher than high, if optimum is higher than high, the gauge is green :

<meter min='0' value='19' max='30' high='20' optimum='25'>19/30 of items</meter>
<meter min='0' value='24' max='30' high='20' optimum='25'>24/30 of items</meter>
<meter min='0' value='26' max='30' high='20' optimum='25'>26/30 of items</meter>

When optimum is between low and high, the gauge is green when close to optimum :

<meter min='0' value='5' max='30' low='10' high='20' optimum='15'>1/6 of items</meter>
<meter min='0' value='14' max='30' low='10' high='20' optimum='15'>14/30 of items</meter>
<meter min='0' value='25' max='30' low='10' high='20' optimum='15'>25/30 of items</meter>

Browser Support

Supported Partially supported Not supported
Chrome 8 IE 10 IE 9
Safari 5.2 Firefox 6 Safari 5.1
Opera 11 Firefox for Android 14 IOS Safari 5.0
Opera Mobile 11   Android 4.0
Chrome for Android 18   Opera Mini 6.0