Meter tag

What is a Meter tag?

The meter tag is an important tag in HTML5 elements. The tag defines a graphic representation of a scalar measure or fractional number in a known range. The tag can be used when it needs to be displayed, for example, battery charge level, disk usage, etc. To use the tag, you need to know the maximum value. The display will show a score within a certain range using the minimum and maximum properties of the property. Use the best feature to determine the desired number, for example, a test pass mark. Note, however, that it is not supported by some browsers.

[When writing in HTML, the <meter> tag is an inline element used to create a gauge with a certain range on a web page. This gauge can be divided into either scalar or fractional values. It is useful for visually displaying where a certain value lies, between some minimum and maximum. For example, showing how much space was used on a hard drive. The following sections contain information about this tag, including an example of it in use, and related attributes and browser compatibility.]

Note

The <meter> tag shouldn’t be used to create a progress bar. In those cases, use the <progress> tag.
  • Example of <meter> code
  • Example result
  • Attributes
  • Compatibility
  • Related pages

Meter tag Explain 01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meter tag</title>
</head>
<body>
    <label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>
</body>
</html>
code preview
meter tag images 01

In our example, we will use the -WebKit-meter-bar and -WebKit-meter-optimum-value pseudo-classes. Each color in the background linear gradient presents the space that is consumed by the sub-categories. Both the transition and animation properties on the <meter> element are supported by Webkit browsers. Change the width of the value (on hover) using transitions and animate the background position of the container with keyframes.

Meter tag Explain 02

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br>
    <meter value="0.75">75%</meter> 75%
  </body>
</html>
code preview
meter tag images 02

HTML5 <meter> Tag

  • Difficulty Level : Easy
  • Last Updated : 18 Aug, 2021

It is used to define scales for measurement in a well-defined range and also supports fractional values. This is also known as gauge. It is used in disk usage results of relevant queries etc.

 Attributes: This tag contains many attributes which are listed below: 

  • form: It defines one or more forms that meter tag belongs too.
  • max: It is used to specify the maximum value of a range.
  • min: It is used to specify the minimum value of a range.
  • high: It is used to specify the range considered to be a high value.
  • low: It is used to specify the range value that is considered to be low.
  • Optimum: It is used to specify the optimum value for the range.
  • value: It is used to specify the required or actual value of the range.

Meter tag Explain 03

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 220px;
        height: 20px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #eee;
        box-shadow: 0 0 3px #666 inset;
      }
      progress[value]::-webkit-progress-value {
        background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
        -webkit-linear-gradient(top, #96f204, #8ebf42),
        -webkit-linear-gradient(right, #96f204, #8ebf42);
        background-size: 40px 20px,  10%;
      }
    </style>
  </head>
  <body>
    <p>Downloading:
      <progress value="35" max="100"></progress>
      <span>35%</span>
    </p>
    <p>Progress bar:
      <progress value="80" max="100"></progress>
      <span>80%</span>
    </p>
  </body>
</html>
code preview
meter tag images 03

Meter tag Explain 04

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
meter::-webkit-meter-bar {
  background: none;
  background-color: lightgrey;
  box-shadow: 0 3px 3px -3px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 3px 3px -3px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

    </style>
  </head>
  <body>
    <p>Downloading:
      <progress value="35" max="100"></progress>
      <span>35%</span>
    </p>
    <p>Progress bar:
      <progress value="80" max="100"></progress>
      <span>80%</span>
    </p>
  </body>
</html>
code preview
meter tag images 04

Meter tag Explain 05

<!DOCTYPE html>
<html> 
<body> 
 <meter value="7" min="0" max="10">7 out of 10</meter><br>
 <meter value="0.4">40%</meter>
 </body> 
</html>
code preview
meter tag images 05

Definition and usage
The element measures proportionally within a given range/fraction. It is also known as a yard. Example: Used part of the disk, a relevant query result, etc. The tag should not be used to indicate progress (progress bar). Use the tag to create a progress bar. The following example shows the use of the tag.

Meter tag Explain 06

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        box-shadow: 0 3px 3px -3px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>
code preview
meter tag images 06

The HTML <meter> tag represents a scalar measurement within a known range or a fractional value. 100

Also known as a gauge, usage could include displaying disk usage, the relevance of a query result, the fraction of a voting population to have selected a particular candidate, or the amount raised during fundraising activities, or the relevance of a search query result. The <meter> element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave. The <meter> element accepts the following attributes.

AttributeDescription
valueSpecifies the “measured” value.
minSpecifies the lower bound of the range. Default is 0.
lowSpecifies the range that is considered to be a “low” value.
highSpecifies the range that is considered to be a “high” value.
maxSpecifies the upper bound of the range. Default is 1.
optimumSpecifies the value that is considered to be the “optimum”, or best, value. If this value is higher than the “high” value then it indicates that the higher the value, the better. If it’s lower than the “low” mark then it indicates that lower values are better. If it is in between then it indicates that neither high nor low values are good.

Meter tag Explain 07

<!DOCTYPE html>
<html>
<head>
  <title>HTML meter tag</title>
</head>
<body>
  <p>Your profile completed: <meter value="80" min="0" max="100">80%</meter></p>
 
  <p>Free Space: <meter value="52" min="0" max="100">52%</meter></p>
</body>
</html>
meter tag images 07

Styling the HTML <meter> tag:ΒΆ

First of all, put the sizes with the help of the width and height properties. Here, you need to use fallbacks because separate pseudo-classes are provided by the A-grade browsers to style the <meter> element. We will use the Webkit/Blink fallback. It provides the following pseudo-classes.

Pseudo-classDescription
-webkit-meter-inner-elementAdditional markup is used for rendering the meter element is read-only.
-WebKit-meter-barIt contains a meter gauge holding the value.
-WebKit-meter-optimum-valueThe current value of the meter element is by default green when the value attribute falls within the low-high range.
-WebKit-meter-suboptimum-valueThe meter tag becomes yellow when the value attribute is outside the low-high range.
-WebKit-meter-even-less-good-valueThe meter tag becomes red when the value and the optimum attributes are outside the low-high range but in opposite zones. For example, value < low < high < optimum or value > high > low > optimum.

Then, we’ll need to set the default appearance of the miter gauge to “none”.

Meter tag Explain 08

<!DOCTYPE html>
<html>
     
    <head>
         <title>Meter Tag</title>
    </head>
     
    <body>
    
         <ol>
            <li><meter min="0" max="100" value="25">25%</meter></li>
            <li><meter min="100" max="200" value="150">50%</meter></li>
            <li><meter min="0" max="100" value="75">75%</meter></li>
            <li><meter min="0" max="800" value="800">100%</meter></li>
          </ol>
          <dl>
            <dt>Width :</dt>
            <dd><meter min="0" max="200" value="100" title="millimeters">125mm</meter>
            </dd>
            <dt>Height :</dt>
            <dd><meter min="0" max="100" value="100" optimum="30" title="millimeters">100mm</meter></dd>
          </dl>
          
    </body>
</html>
meter tag images 08

Meter tag Explain 09

<!DOCTYPE html>        
<html lang="en">  
   <head>  
      <meta charset="utf-8" />  
      <style>    
         meter {    
         width: 300px;    
         height: 25px;    
         -webkit-appearance: none; /* Reset appearance */    
         border: 1px solid #F0f;    
         border-radius: 5px;    
         }    
         meter::-webkit-meter-bar {    
         background: none;     
         background-color: whiteSmoke;    
         box-shadow: 0 5px 5px -5px #00F inset;    
         border: 1px solid #0ff;    
         border-radius: 5px;    
         }    
         meter::-webkit-meter-optimum-value {    
         box-shadow: 0 5px 5px -5px #999 inset;    
         background-image: linear-gradient(    
         25deg,     
         #002900 5%,     
         #003D00 5%,    
         #005200 25%,    
         #007A00 25%,    
         #00A300 55%,    
         #00CC00 55%,    
         #33D633 95%,    
         #66E066 95%,    
         #99EB99 100%    
         );    
         background-size: 100% 100%;    
         }    
         meter::-webkit-meter-suboptimum-value {    
         box-shadow: 0 5px 5px -5px #999 inset;    
         background-image: linear-gradient(    
         25deg,     
         #333300 5%,     
         #666600 5%,    
         #999900 25%,    
         #CCCC00 25%,    
         #FFFF00 55%,    
         #FFFF33 55%,    
         #FFFFCC 95%,    
         #FF3300 95%,    
         #B22400 100%    
         );    
         background-size: 100% 100%;    
         }    
         meter::-webkit-meter-even-less-good-value  {    
         box-shadow: 0 5px 5px -5px #999 inset;    
         background-image: linear-gradient(    
         25deg,     
         #000000 5%,     
         #330000 5%,    
         #660000 25%,    
         #990000 25%,    
         #CC0000 55%,    
         #FF0000 55%,    
         #FF3333 95%,    
         #FF6666 95%,    
         #FF9999 100%    
         );    
         background-size: 100% 100%;    
         }    
      </style>  
   </head>  
   <body>        
      <b>Meter without value</b>    
      <meter></meter>    
      <br/><br/>    
      <b>Meter with value but without min and max attribute</b>    
      <meter value="0.8"></meter>    
      <br/><br/>    
      <b>Meter with value, min and max attribute</b>    
      <meter min="0" max="100" value="17"></meter>    
      <br/><br/>    
      <b>Meter (when "min <= value < low")</b>    
      <meter  min="0" max="100" value="17" low="25" high="75"></meter>    
      <br/><br/>    
      <b>Meter (when "high < value <= max")</b>    
      <meter  min="0" max="100" value="80" low="25" high="75"></meter>    
      <br/><br/>    
      <b>Meter (when "low <= value <= high")</b>    
      <meter  min="0" max="100" value="50" low="25" high="75"></meter>    
      <br/><br/>    
      <b>Meter with optimum attribute</b>    
      <meter  min="0" max="100" value="24" low="25" high="75" optimum="80"></meter>    
      <br/><br/>    
      <b>Meter with optimum attribute</b>    
      <meter  min="0" max="100" value="80" low="25" high="75" optimum="20"></meter>    
   </body>  
</html> 
meter tag images 09

Related Posts

meter element

meter element

How To Use The Meter Element In HTML?

Preg_match_all-in-php.jpg

Preg_match_all in php

The Basic Concept of the PHP preg_match_all Function The PHP preg_match_all function is a pattern-matching function that matches the text. This function is use to search for…

document.queryselector-in-javascript.jpg

what is document.queryselector in javascript

What is document.querySelector() in Javascript? The javascript document.querySelector() method retrieves. The element with the given tag name or id from within a document. The document.querySelector() method returns…

JQuery hide Method.jpg

JQuery hide Method

What can the JQuery Hide Method Do For You? The JQuery Hide Method is a function that one can use to hide text on a website. It…

Push array in php.jpg

Push array in php

What is a php Push Array? A push array is a PHP data type that can store an arbitrary number of values. The push array is a…

How to use map method in javascript.jpg

How to use map method in javascript

What is the Map Method? The map method is a higher-order function in JavaScript. Who can use it to transform an array into another array by iterating…

Leave a Reply

Your email address will not be published.

Education Template