HTML optimum Attribute
The HTML optimum attribute specifies the preferred value within the range of a <meter> element. When used with the low and high attributes, it helps indicate whether lower, middle, or higher values are considered preferable.
Elements That Use the optimum Attribute
The optimum attribute is used with the <meter> element.
| Element | Description |
|---|---|
<meter> |
Specifies the value within the meter's range that is considered optimum. |
optimum Value
The value of the optimum attribute must be a valid floating-point number. It represents the point within the meter's range that is considered preferable.
<meter min="0" max="100" value="75" optimum="100">75%</meter>The optimum value must fall within the range established by the min and max attributes. If the specified value falls outside that range, the resulting optimum value is limited to the nearest boundary.
If optimum is omitted, its value defaults to the midpoint between the minimum and maximum values.
The Meter Range
The <meter> element can use min, max, low, high, and optimum to describe different parts of a known range.
<meter min="0" max="100" low="30" high="70" optimum="90" value="80">80%</meter>The low and high attributes divide the meter into low, middle, and high ranges. The location of optimum tells the browser which of those ranges is considered preferable.
Lower Values Are Better
When the optimum value is below the low value, the lower part of the range is considered preferable. This can be useful for measurements where smaller values are better.
<meter min="0" max="100" low="30" high="70" optimum="10" value="20">20%</meter>Middle Values Are Better
When the optimum value is between the low and high values, the middle part of the range is considered preferable. Values toward either end of the range are less desirable.
<meter min="0" max="100" low="30" high="70" optimum="50" value="50">50%</meter>Higher Values Are Better
When the optimum value is above the high value, the higher part of the range is considered preferable. This can be useful for measurements where larger values are better.
<meter min="0" max="100" low="30" high="70" optimum="90" value="85">85%</meter>Browser Appearance
Browsers may use the low, high, and optimum values when determining the visual appearance of a <meter>. For example, the meter may use different visual indicators depending on whether the current value falls within a preferred or less desirable part of the range.
The exact appearance is controlled by the browser and operating system, so the colors and styling of a native meter can vary between browsers and devices.
Common Mistakes
Do not confuse optimum with the meter's current value. The value attribute represents the measurement being displayed, while optimum indicates which value is considered preferable.
Do not use optimum outside the range established by min and max. The optimum value is constrained to the meter's range.
Do not assume that a larger optimum value always means higher values are better. Its relationship to low and high determines which part of the range is considered preferable.
Do not use <meter> to display the progress of a task. Use the <progress> element for progress indicators.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The optimum attribute on the <meter> element is widely supported in current core browsers.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the optimum Attribute
The example shows three meters with the same low and high boundaries but different optimum values. Compare how the preferred range changes when lower, middle, or higher values are considered better.
Summary
The HTML optimum attribute specifies the preferred value within the range of a <meter> element. Its relationship to the low and high values indicates whether the lower, middle, or higher part of the range is considered preferable.