HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include
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.
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.
- 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.
- 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.
- 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%
- 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.
- 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 max value.
- 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
Because the max value is going to be 100% (unless you always give that extra 10 :P ). You can also use fractions as the range is within itself, such as
Some real world examples
<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).
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>
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.
<!--[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.
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.
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.