References

Beginner-friendly references for web development, with live, editable examples.

The HTML optimum attribute

Attribute All modern browsers Updated
Quick answer

The HTML optimum attribute indicates the optimum value, which tells the browser whether low or high is "good" (affecting the bar color). It is used on the <meter> element.

Overview

The optimum attribute indicates the optimum value, which tells the browser whether low or high is "good" (affecting the bar color). It applies to the <meter> element.

If optimum sits in the high range, higher values are "good" (green); if in the low range, lower values are good. This drives the meter's color feedback.

Syntax

<meter min="0" max="100" low="30" high="70" optimum="90" value="85"></meter>

Values

Value
A number within the meter's range.

Example

Live example 
<meter min="0" max="100" low="30" high="70" optimum="90" value="85"></meter>

Best practices

  • Set the min, max and current value to define the gauge.
  • Use low, high and optimum so the browser colors the gauge meaningfully.
  • Use a <meter> for a measurement, not task progress — for that, use <progress>.
  • Provide a visible text label so the value is conveyed in words too.

Frequently asked questions

What does the optimum attribute do?
Sets the optimum value of a meter.
How do the low, high and optimum attributes work?
They split the range into segments so the browser can color the gauge — for example green in the optimum zone and red when poor.
What is the difference between meter and progress?
<meter> shows a measurement within a range; <progress> shows how far along a task is.
Which elements use the optimum attribute?
It is an element-specific attribute, used on the <meter> element.
open pattern