New in HTML5.

<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.

Claire is an HTML enthusiast.