Semantic <meter>
"Meter" is a new element in HTML5 which represenet value of a known range as a gauge. The keyword here is "known range". That means, you are only allowed to use it when you are clearly aware of its minimum value and maximum value.
Besides, you shouldn't use meter element to indicate a progress such as 80% because there is a "progress" element in HTML5.
One example is score of rating. I would rate this movie <meter min="0" max="10" value="8">8 of 10</meter>.
Below is the scores of alex's mid-term exam.
Science :
Math :
Geography :
History :
Science : <meter min="0" max="100" value="95">95 of 100</meter>
Math : <meter min="0" max="100" value="60">60 of 100</meter>
Geography : <meter min="0" max="100" value="20">20 of 100</meter>
History : <meter min="0" max="100" value="50">50 of 100</meter>
As of writing, only Opera 11 and Google Chrome 8 render "meter" element into a visualize gauge. Therefore, it is good to specify textual value in between "meter" tags, so web browsers don't render "meter" as gauge can simply show its value in plain text.
Without your effort to specify a textual value in between "meter" tag, user will just see a blank space in web browsers that don't support "meter".
Browsers | Render meter element as gauge |
---|---|
IE 9 Beta | |
Firefox 13 | |
Safari 5 | |
Chrome 8 | ✓ |
Opera 11 | ✓ |
If you do not have the web browser that supports "meter" element, below is how it is seen in Opera 11.

Besides "min", "max" and "value" attribute, there are 3 more attributes of meter element which you can use to further enhance your gauge.
Attributes | Descriptions |
---|---|
value | You need to specify a value in number in order to use "meter" element. This is an mandatory attribute, No excuse! The number can be integer or floating point number. |
min | Minimum value of meter element. If unspecified, it will be Zero (0). |
max | Maximum value of meter element. If unspecified, it will be One (1). |
low | This is optional unless you wish to indicate the low value of the range. |
high | This is optional unless you wish to define high value of the range. |
optimum | This is completely optional. This attribute is for specifying an optimum point of a range. |