HTML - high Attribute

The HTML high attribute is used to specify the lower bound of an upper range. It is the lower numerical bound of the higher end of the measured range.

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

Following is the syntax of high attribute −

<meter high= "value"></meter>

Example

In the following example, we are using the high attribute with the meter tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'high' attribute</title>
</head>
<body>
   <!--HTML 'high' attribute-->
   <p>Example of the HTML 'high' attribute</p>
   <label>Grade O</label>
   <meter high="90" max="100" value="95"></meter>
   <br>
   <label for="">Grade A+</label>
   <meter high="80" max="100" value="83"></meter>
   <br>
   <label for="">Grade A</label>
   <meter high="70" max="100" value="72"></meter>
   <br>
   <label for="">Grade E</label>
   <meter high="30" max="100" , value="35"></meter>
   <p>Students who get more than 90 marks are considered as grade O.</p>
   <p>Students who get marks between 80 to 90 are considered as grade A+.</p>
   <p>Students who get marks between 70 to 80 are considered as grade A.</p>
   <p>Students who get marks below 40 consider failures.</p>
</body>
</html>

On running the above code, the output window will pop up displaying the text along with the meter reading on the webpage.

Example

Considering the another scenario, where we are going to run the script the along with the high attribute.

<!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 health</label>
      <meter high="80" low="65" min="0" max="100" value="90" id='rahul'></meter>
      <br>
      <br>
      <span id='res'>Your health is very week..</span>
      <br>
      <br>
      <button onclick="Increase()">Apply Health Kit</button>
      <p>Click on the above button to increase your immunity..</p>
   </fieldset>
   <script>
      function Increase() {
         var h = document.getElementById('rahul');
         var immu = h.high;
         h.high = 90;
         var res = document.getElementById('res');
         res.innerHTML = "Your immunity has increased from " + immu + " to " + h.high;
      }
   </script>
</body>
</html>

When we execute the script, it will generate an output consisting of the meter reading along witha click button on the webpage. when the user clicks the button the event gets triggered and changes the meter reading.

html_attributes_reference.htm
Advertisements