HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include time, mark and here is another one, meter. It is an inline element so it can be used inside most elements, including a header or a paragraph.

What does it say in the spec?

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

When I first read about the meter tag, I immediately thought it would be useful for profile pages, such as height and weight, and maybe age, marked up in a nice definition list. However, the third line of the spec says

The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value

So there goes my idea. The emphasis of the spec definition is “a scalar measurement within a known range”. We’ll go through some sample usage now but I still think it would add useful meaning to a sportsman’s profile page for example.

Attributes

There are six attributes allowed with the meter tag: value, min, max, high, low and optimum. As we’ll mention later, the emphasis is on the author to use these correctly.

Value

This is what will be parsed out – the actual value. If you do not use the value attribute, then the first number inside the tag is the value: <meter> 2 out of 10</meter>. If a real number is not used, then the value is zero.

Min

The minimum allowed value. If there is no min attribute, then it assumes the minimum is zero. If it is not specified then the value is 0.

Max

The maximum allowed value. If the maximum value is less than the minimum value, then the minimum value is used as the max. If it is not specified then the value is 1. However, if it is possible to specify the value of this in the content – such as a percentage sign, as the maximum then will be 100%

Low

This is considered to be the low part of the value range. It must be less than or equal to the value of the high attribute. Also, if the low value is less than the min value, then the low value is the same as the min value.

High

This is considered to be the high part of the value range. If the high value is less than the low boundary, then the high value is the same as the low value. Also, if the high value is greater than the max value, then the high value is the same as the high value.

Optimum

This is considered to be the optimum value and needs to be somewhere between min and max. It can be greater than the high attribute

Let’s have a look at some examples

A voting or rating tool

<p>Your score is:  <meter>2 out of 10</meter></p>

We can give this further meaning by adding min and max attributes

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

Without the attributes

You do not always need to use an attribute with the meter tag. You could use

<meter>80%</meter>

Because the max value is going to be 100% (unless you always give that extra 10 ). You can also use fractions as the range is within itself, such as

<meter>3/4</meter>

Some real world examples

Christmas Calendar/Countdown

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

Notice that the title attribute can be used to specify the unit (so we can use “centimeters” or “lbs”, and so on).

Just Giving

We could also use meter on the fundraising website Justgiving.

This page, for example, would use

<dl>
  <dt>Target</dt>
  <dd><meter min="145" value="145" title="pounds">£145</meter></dd>
  <dt>Amount raised so far</dt>
  <dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145" title="pounds">£145</meter></dd>
</dl>

Incorrect use

Empty tag

If you used

<meter min="0" max="100" value="75"></meter>

Nothing will display on your page – it is noted in the spec

The recommended way of giving the value is to include it as contents of the element

So you need to put something in the content of the tag and it doesn’t necessarily have to be a number. The spec has a good example of this

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

Which could be used to produce on-screen information as shown

As I noted earlier, it is incorrect to use as a weight or height, unless there is a maximum value. The spec gives this example:

<p>The grapefruit pie had a radius of <meter>12cm</meter>  and a height of <meter>2cm</meter>.</p> <!-- BAD! -->

Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:

<p>The grapefruit pie had a radius of 12cm and a height of 2cm.</p>
<dl>
<dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
<dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

Whilst the above is now a correct usage of the meter tag, how do I know the max height or radius of a grapefruit? I would prefer to use a meter tag there but instead I’d probably just use a definition list to display the information.

Browser support

The meter tag works in at least the following browsers Safari 4, Firefox 3.5, Chrome 2, Opera 9.64 naturally. The following javascript is needed for IE 6, 7 and 8 (see Remy’s article about Getting HTML5 to play nicely in older browsers.

 <!--[if IE]>
  <script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

As it is an inline element, you don’t need to do anything special with the CSS.

Conclusion

If I were to use

<meter value="1000" min="0"  max="500">100%</meter>

Obviously there are inconsistencies. Now, I am just being silly there but what the user will see on the screen is “100%” when the value is actually 1000. The meter tag puts the emphasis on the author to make sure that they are using this nice, new semantic tag,well, semantically and correctly.

The attributes can appear to be quite confusing but the spec is very detailed for this element. I do think they may have missed a trick by not allowing it to be used to give a stand-alone height or weight but overall I see the meter tag being used a lot in apps and on webpages, perhaps if used with javascript, it could generate live graphs and charts (though we can also use canvas for this).

Finally, I also wonder if meter allows for negative values? For example if the temperature was going to be between -10 and 5 degrees could I use meter to mark that up? I’d love to know your thoughts.

Useful Links

• http://www.whatwg.org/specs/web-apps/current-work/#the-meter-element

Share and Save:

Measure up with the meter tag originally appeared on HTML5 Doctor on October 7, 2009.