<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
The output looks like this: 90%
Displaying a Number Range
<meter> with the
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
<meter value="11" min="0" max="45" optimum="40">25 out of 45</meter>
The output looks like this: 25 out of 45
<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
min attribute. This prohibits its use for any measurement that could theoretically exceed the range you define in your code.