HTML optimum Attribute

Description

The optimum attribute in HTML is used in conjunction with the <meter> tag, which represents a scalar measurement within a known range, or a fractional value. This could be a disk usage, the relevance of a search result, or any other measurable indicator.

The purpose of the optimum attribute is to indicate the preferable or ideal value for the gauge represented by the <meter> element. This can help with the semantic interpretation of the meter's value, aiding in the visualization of whether the actual value is considered to be within an optimal, suboptimal, or even a critical range.

Here's how it works in practice:

  • If the actual value of the <meter> is close to or equal to the value specified by the optimum attribute, this is usually represented as a favorable condition (often visually, through the use of color or other indicators).
  • If the actual value is significantly lower or higher than the optimum (depending on the context), it may be represented as less favorable or even critical.

The optimum attribute, therefore, helps to provide contextual understanding of the measured value, beyond the mere presentation of a number or a percentage. It adds a layer of semantic information that can enhance the user's interpretation of the data being presented.

Syntax

<meter optimum="number">

Values

  • numberA whole or floating point number.

Applies To

The optimum attribute can be used on the following html elements.

Example

<h2>Example of optimum attribute</h2>

<meter min="0" max="100" value="70" optimum="80"> Your progress is at 70%.
</meter>

<meter min="0" max="100" value="90" optimum="80"> Your progress is at 90%.
</meter>

<meter min="0" max="100" value="100" optimum="80"> You've reached the optimal level of 100%.
</meter>

Browser Support

The following table will show you the current browser support for the HTML optimum Attribute.

Desktop
Edge Chrome Firefox Opera Safari
18616116
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18161110.31x

Last updated by CSSPortal on: 29th March 2024