<meter> HTML Tag
Correct Usage
The <meter>
element is new in HTML 5. It aids rapid data visualization by displaying a percentage on a gauge. The element can be linked to a form using the form
attribute, and is most helpful when displaying statistics or test scores.
Displaying a Percentage
<meter value="0.9">90%</meter>
The output looks like this: 90%
Displaying a Number Range
Use <meter>
with the min
and max
attributes to display a score within a defined range. The optimum
attribute can be used to specify an ideal or desired number, such as a pass mark in a test, although this is not supported in all browsers. (The opposite of optimum
in this scenario is low
).
<meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>
The output looks like this: 25 out of 45
Prohibited Usage
<meter>
is not designed to be used as a progress bar. There is a <progress>
element for that purpose. Additionally, you should only use <meter>
if you are able to define a value for the max
and min
attribute. This prohibits its use for any measurement that could theoretically exceed the range you define in your code.