Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we set what value is the optimal value for the gauge in HTML?
The optimum attribute in HTML's <meter> element defines the optimal or ideal value for a gauge. This attribute helps browsers determine the best visual representation of the meter by indicating what range of values should be considered "good" or preferred.
The <meter> element, also known as a gauge, displays scalar measurements within a defined range. The optimum attribute works alongside other attributes like low and high to create visual zones that indicate whether the current value is in a good, average, or poor range.
Syntax
Following is the syntax for the optimum attribute in the meter element −
<meter value="current" min="minimum" max="maximum" optimum="optimal"></meter>
The optimum value must be a floating-point number that falls between the min and max values. This value determines which part of the gauge range is considered ideal.
How Optimum Works with Low and High
The browser uses the optimum value along with low and high thresholds to color-code the meter −
Green (Good) − When the current value is in the same region as the optimum value
Yellow (Average) − When the current value is in a suboptimal but acceptable range
Red (Poor) − When the current value is in the least desirable range
Basic Meter with Optimum Value
Example
Following example demonstrates a simple meter with an optimum value −
<!DOCTYPE html> <html> <head> <title>Meter with Optimum Value</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Disk Usage Monitor</h2> <p>Current usage: 60%</p> <meter value="0.6" min="0" max="1" optimum="0.3" low="0.2" high="0.8">60%</meter> <p>Optimal usage is around 30%. Current level is acceptable but higher than ideal.</p> </body> </html>
The meter shows 60% usage with an optimal value of 30%. The gauge will be colored to indicate that the current value is higher than optimal but still within an acceptable range.
Optimum in Different Zones
Example
Following example shows how the optimum value affects meter appearance in different scenarios −
<!DOCTYPE html>
<html>
<head>
<title>Optimum Value Scenarios</title>
<style>
.meter-demo { margin: 15px 0; }
.meter-demo p { margin: 5px 0; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temperature Monitoring Systems</h2>
<div class="meter-demo">
<p><strong>Server Temperature (Optimal: Cool)</strong></p>
<p>Current: 45°C</p>
<meter value="45" min="0" max="100" optimum="25" low="30" high="70">45°C</meter>
<p>Optimal range is cool (around 25°C)</p>
</div>
<div class="meter-demo">
<p><strong>Room Temperature (Optimal: Moderate)</strong></p>
<p>Current: 22°C</p>
<meter value="22" min="0" max="40" optimum="22" low="18" high="26">22°C</meter>
<p>Optimal temperature is moderate (around 22°C)</p>
</div>
<div class="meter-demo">
<p><strong>Oven Temperature (Optimal: High)</strong></p>
<p>Current: 180°C</p>
<meter value="180" min="0" max="250" optimum="200" low="100" high="150">180°C</meter>
<p>Optimal range is high (around 200°C)</p>
</div>
</body>
</html>
Each meter shows different scenarios where the optimum value is in low, middle, or high ranges. The browser colors the gauges accordingly to show whether current values are optimal, acceptable, or problematic.
Battery Level Example
Example
Following example demonstrates a practical battery level indicator −
<!DOCTYPE html>
<html>
<head>
<title>Battery Level Gauge</title>
<style>
.battery-status {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin: 10px 0;
border-left: 4px solid #4CAF50;
}
meter {
width: 200px;
height: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Device Battery Monitor</h2>
<div class="battery-status">
<p><strong>Laptop Battery</strong></p>
<meter value="0.75" min="0" max="1" optimum="0.8" low="0.2" high="0.9">75%</meter>
<p>75% - Good level, close to optimal</p>
</div>
<div class="battery-status">
<p><strong>Phone Battery</strong></p>
<meter value="0.15" min="0" max="1" optimum="0.7" low="0.2" high="0.9">15%</meter>
<p>15% - Low battery, needs charging</p>
</div>
<div class="battery-status">
<p><strong>Tablet Battery</strong></p>
<meter value="0.95" min="0" max="1" optimum="0.7" low="0.2" high="0.9">95%</meter>
<p>95% - Fully charged, above high threshold</p>
</div>
</body>
</html>
The battery meters show different charge levels with an optimum around 70%. The browser automatically colors each gauge based on how the current value compares to the optimal range.
Attributes Comparison
The meter element uses several attributes together to create meaningful gauges −
| Attribute | Purpose | Required |
|---|---|---|
value |
Current measurement value | Yes |
min |
Minimum possible value (default: 0) | No |
max |
Maximum possible value (default: 1) | No |
optimum |
Ideal or preferred value | No |
low |
Upper boundary of low range | No |
high |
Lower boundary of high range | No |
Best Practices
Always ensure the
optimumvalue is betweenminandmaxUse meaningful ranges with
lowandhighto create distinct zonesProvide fallback text content between the meter tags for accessibility
Consider the user's perspective when setting optimal values (e.g., for disk usage, lower is usually better)
Conclusion
The optimum attribute in HTML's <meter> element defines the ideal value for a gauge, helping browsers provide visual feedback through color-coding. Combined with low and high thresholds, it creates intuitive gauges that clearly communicate whether current values are optimal, acceptable, or problematic.
257 Views
