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 seasoned technical writer, editor and HTML enthusiast.