New in HTML5.

<meter> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

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. She writes for and runs a content agency, Red Robot Media.