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 to set the range that is considered to be of high value in HTML?
Use the high attribute in HTML to set the range that is considered to be of high value. The high attribute is used with the <meter> element to define a threshold above which the measured value is considered high or above normal.
The high attribute works in conjunction with other <meter> attributes like low, min, max, and optimum to create visual indicators for different value ranges. When a meter's value exceeds the high threshold, browsers typically display it in a different color to indicate the high state.
Syntax
Following is the syntax for the high attribute −
<meter high="number"></meter>
The high attribute accepts a floating-point number that defines the lower boundary of the high range. This value must be less than the max value and greater than the low value (if specified).
How the High Attribute Works
The <meter> element divides its range into three sections based on the low and high attributes −
Low range − From
mintolow(typically displayed in red)Medium range − From
lowtohigh(typically displayed in yellow/orange)High range − From
hightomax(typically displayed in green for positive metrics like progress, or red for negative metrics like temperature)
Example − Basic High Attribute Usage
Following example demonstrates the high attribute with a water level meter −
<!DOCTYPE html>
<html>
<head>
<title>High Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Water Tank Status</h2>
<p>
Water Level:
<meter min="0" low="40" high="100" max="120" value="75">75 out of 120</meter>
75%
</p>
<p><small>Normal range: 40-100, High range: 100-120</small></p>
</body>
</html>
The meter shows a value of 75, which falls in the medium range (between low=40 and high=100). The browser displays this with an appropriate color indicator −
Water Tank Status Water Level: [meter bar showing 75%] 75% Normal range: 40-100, High range: 100-120
Example − Multiple Meters with Different High Values
Following example shows multiple meters with different high attribute values −
<!DOCTYPE html> <html> <head> <title>Multiple High Attribute Values</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>System Performance Metrics</h2> <p>CPU Usage: <meter min="0" low="30" high="70" max="100" value="45"></meter> 45%</p> <p>Memory Usage: <meter min="0" low="50" high="80" max="100" value="85"></meter> 85%</p> <p>Disk Space: <meter min="0" low="60" high="90" max="100" value="95"></meter> 95%</p> <p>Network Load: <meter min="0" low="20" high="60" max="100" value="25"></meter> 25%</p> </body> </html>
Each meter has different thresholds for what is considered "high" based on the specific metric being measured −
System Performance Metrics CPU Usage: [meter bar] 45% Memory Usage: [meter bar] 85% Disk Space: [meter bar] 95% Network Load: [meter bar] 25%
Example − Interactive Meter with High Threshold
Following example demonstrates how the high attribute affects the visual appearance dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Interactive High Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temperature Monitor</h2>
<p>
Temperature:
<meter id="tempMeter" min="0" low="20" high="35" max="50" value="25"></meter>
<span id="tempValue">25</span>°C
</p>
<p>
<button onclick="increaseTemp()">Increase Temperature</button>
<button onclick="decreaseTemp()">Decrease Temperature</button>
</p>
<p id="status">Status: Normal</p>
<script>
let currentTemp = 25;
function updateMeter() {
const meter = document.getElementById('tempMeter');
const valueSpan = document.getElementById('tempValue');
const status = document.getElementById('status');
meter.value = currentTemp;
valueSpan.textContent = currentTemp;
if (currentTemp >= 35) {
status.textContent = "Status: High Temperature!";
status.style.color = "red";
} else if (currentTemp <= 20) {
status.textContent = "Status: Low Temperature";
status.style.color = "blue";
} else {
status.textContent = "Status: Normal";
status.style.color = "green";
}
}
function increaseTemp() {
if (currentTemp < 50) {
currentTemp += 5;
updateMeter();
}
}
function decreaseTemp() {
if (currentTemp > 0) {
currentTemp -= 5;
updateMeter();
}
}
</script>
</body>
</html>
The meter changes its visual appearance as the temperature value moves between the low, medium, and high ranges. When the value reaches 35°C (the high threshold), the status changes accordingly.
Browser Compatibility
The high attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. However, the visual representation of different ranges may vary slightly between browsers. Internet Explorer does not support the <meter> element.
Key Points
The
highattribute value must be a valid floating-point numberIt should be greater than the
lowvalue and less than themaxvalueThe
highattribute only works with the<meter>elementDifferent browsers may display the high range with different colors
The attribute helps create accessible, semantic progress indicators
Conclusion
The high attribute in HTML defines the threshold above which meter values are considered high or above normal. It works with the <meter> element to create visual indicators that help users quickly understand whether values are in normal, low, or high ranges. This attribute is essential for creating semantic and accessible progress meters and gauge displays.
166 Views
