HTML - high Attribute

HTML high attribute is used mention a value which is consider as high value of the meter element. It displayed differently when value exceed high limit.

This attribute value must be less than the maximum value (max attribute) and also greater than the min and low values (min attribute, low attribute). If it is not specified within the meter element or its value is greater than the max value (max attribute), then the high attribute value will be equal to the max value.

Syntax

<meter high= "number"></meter>

Applies On

Below listed elements allow using of the HTML high attribute

Element	Description
<meter>	HTML <meter> tag is used to render data within the given range.

Examples of HTML high Attribute

Below examples will illustrate the HTML high attribute, where and how we should use this attribute!

Define high value on meter

In the following example we will create a meter element where we will set the high value at 80.

<!DOCTYPE html>
<html lang="en">
<body>
    <h3>HTML high Attribute</h3>
    <label for="server-load">Room 1: Server Load</label> 
    <meter id="server-load" value="96" min="0" max="100" 
           low="50" high="90" optimum="0.5">
    </meter>
</body>

</html>

Color of meter tag Depends on value & high

In the following example, we are using the high attribute with the meter tag. In the output if the value of 'value' attribute is between high and low, then result bar will be green.

<!DOCTYPE html>
<html lang="en">
<body>
    <h3>HTML high Attribute</h3>
    <label for="server-load">Room 1: Server Load</label> 
    <meter id="server-load" value="0.7" min="0" max="1" 
           low="0.3" high="0.8" optimum="0.5">
    </meter>
    <br>
    <label for="server-load">Room 2: Server Load</label> 
    <meter id="server-load" value="0.9" min="0" max="1" 
           low="0.3" high="0.8" optimum="0.5">
    </meter>
    <br>
    <label for="server-load">Room 3: Server Load</label> 
    <meter id="server-load" value="0.1" min="0" max="1" 
           low="0.3" high="0.8" optimum="0.5">
    </meter>
    
</body>

</html>

Manipulating value of meter Element based on high Value.

Considering the another scenario, where we are going to run the script the along with the high attribute. Here user can dynamically increase value to meet target.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'high' attribute</title>
</head>

<body>
    <!--HTML 'high' attribute-->
    <p>Example of the HTML 'high' attribute</p>
    <fieldset>
        <legend>Meter-high</legend> 
        <label for="">Rahul's Work Load</label> 
        <meter high="70" low="45" min="0" 
               max="100" value="70" id='rahul'>
        </meter>
        <br><br>
        <span id='res'>Average Workload</span>
        <br><br> 
        <button onclick="Increase()">Add Tasks</button>
        <p>Add more tasks</p>
    </fieldset>
    <script>
        function Increase() {
            var h = document.getElementById('rahul');
            var work = h.value;
            h.value = 90;
            var res = document.getElementById('res');
            res.innerHTML = "Your workload has increased from " 
            + work + " to " + h.value;
        }
    </script>
</body>

</html>

Supported Browsers

Attribute
high	Yes 8.0	No	Yes 6.0	Yes 6.0	Yes 11.0

html_attributes_reference.htm