HTML - optimum Attribute

The optimum is an HTML attribute that specifies the range where the gauge (to determine the capacity of contents or estimate a judge's) value is considered to be an optimal value.

This attribute must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, along the range is considered. If this attribute in between the min attribute and low attribute, then the lowered range is considered.

The browser will change the color of the meter bar depending on whether the value is less than or equal to the optimum value.The optimum attribute used within the <meter> element.

Syntax

Following is the syntax of the meter attribute −

<meter optimum="value"></meter>

Where value is a floating-point number that represents the optimal value of the gauge.

Example

In the following example, let’s demonstrate the working of the optimum attribute to find the range of the gauge and put the optimum value below the low and high.

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;">tutorials<span style="color: black">point</span>
   </h1>
   <h2> HTML optimum attribute </h2>
   <p>optimum value below low and high:
   <meter value="0.6" max="0.9" min="0.1"
      optimum="0.1" high="0.5" low="0.2">
   </meter>
   </p>
</body>
</html>

On running the above code, the output window will pop up displaying the meter range on the webpage.

Example

Considering the another scenario, where we are going to use the optimum value between the low and high value of the meter element.

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;">tutorials<span style="color: black">point</span>
   </h1>
   <h2> HTML optimum attribute </h2>
   <p>optimum value between low and high:
   <meter value="0.6" max="0.9" min="0.1"
      optimum="0.3" high="0.5" low="0.2">
   </meter>
   </p>
</body>
</html>

When we run th above code, it will generate an oupu consisting of the meter range displayed on the webpage.

Example

Let's look at the following example, where we are going to use the optimum greater than the low and high value of the meter element.

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;">tutorials<span style="color: black">point</span>
   </h1>
   <h2> HTML optimum attribute </h2>
   <p>optimum value between low and high:
   <meter value="0.7" max="0.9" min="0.1"
      optimum="0.6" high="0.5" low="0.2">
   </meter>
   </p>
</body>
</html>

On running the above code, the output window will pop up displaying the meter range on the webpage.

html_attributes_reference.htm
Advertisements