Describe Scores, Comparisons + Ranges Using The <meter> Element

Semantic HTML Basics

The <meter> element is used to markup a value that falls within a range, and has an optimum value.

by Michael Anniert on Unsplash

The tag is rendered as a scalar bar, similar to the progress element.

For example, the following HTML:

<p>He got a 20% score <meter min=”0" low=”30" high=”70" max=”100" value=”20" optimum=”100">20%</meter> on the exam.</p>

Produces the following meter in Chrome:

Internally, the element creates 3 different ranges within the maximum and minimum values, based on the low and high values and the values in between.

In the example above there would be 3 ranges registered by the element:

1. 0–30
2. 30–70
3. 70–100

The element then styles the bar based on how close the actual value is to the “optimum” value.

The Range Optimum

The ‘optimum’ value of the range element is considered to be the maximum value unless otherwise specified. If you specify the optimum value to be somewhere else in the bar then the bar will register the red, green and yellow statuses differently.