Meter Tag in HTML 5

Introduction

This  article explains the HTML 5 meter tag and how to create it.
 
What is meter tag?
In my previous article I explained the Progress Bar in HTML 5 and in this article I am explaining the meter tag. The output of both (progress and meter) tags is the same as we will see but there is the difference that actually the meter tag is used to represent a scalar measurement within a known range. The value can be fractional.

Examples

Disk uses, the relevance of a query result, the fraction of a voting population to have selected a specific candidate.
 
What  is the difference between progress tag and meter tag?

In my previous article Progress Bar in HTML 5 I have said that a progress bar is used to display the progress of a specific task. Or a progress element represents the completion progress of a task. Whereas the meter tag is used to represent guages.  We can think that a progress tag represents dynamic data whereas a meter tag represents static data. 
 
Note: 
  1. According to the W3C the meter element should not be used to indicate progress, because to indicate the progress we have the progress tag.
  2. The meter element also does not represent a scalar value of an arbitrary range; for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.
Syntax

The Meter tag is an inline element, the same as a header, progress and so on.
  1. <meter></meter>  
Attributes

Apart from the Global Attributes and Event Attributes, the meter tag have 6 more attributes as shown in the following table:
 
Attribute Value Description
Min Floating Point Number Specifies the lower bound, Default value is 0.0
Max Floating Point Number Specifies the upper bound, Default value is 1.0
Low Floating Point Number This represents the upper bound of the low end
High Floating Point Number This represents the lower bound of the high end
Value Floating Point Number Specifies the current value
Optimum Floating Point Number Specifies that what measurements value is the best value

The following inequalities must hold, as applicable:
  • min <= value <= max
  • min <= low <= max (if low is specified)
  • min <= high <= max (if high is specified)
  • min <= optimum <= max (if optimum is specified)
  • low <= high (if both low and high are specified)
Note: if you do not specify min or max then the range will be between 0.0 to 1.0 and the value must be in that range.
 
HTML DOM Meter Object
In the DOM the meter element is defined by METER that represents <meter> for HTML 5.
  • How the meter object can be accessed: using the getElementById() method you can access the <meter> element.
    1. var x = document.getElementById("[Give id of the meter tag here]");   
  • Create a meter object: You can also create the <meter> element dynamically using the createElement() method:
    1. var x = document.createElement("METER");   
  • Meter object properties: The properties of a meter object is given in the following table:

    Property Description
    labels Returns a list of <label> elements that are labels for a meter
    min Gets and Sets min attribute
    max Gets and Sets max attribute
    low Gets and Sets low attribute
    high Gets and Sets high attribute
    value Gets and Sets value attribute
    optimum Gets and Sets optimum attribute

Example 1: This example will show you how can you use a meter element in HTML 5.

  1. <!DOCTYPE html>      
  2. <html lang="en">      
  3. <head>      
  4.     <meta charset="utf-8" />      
  5. </head>      
  6. <body>      
  7.    <b>Meter without value</b>  
  8.    <meter></meter>  
  9.   
  10.    <br/><br/>  
  11.    <b>Meter with value but without min and max attribute</b>  
  12.    <meter value="0.8"></meter>  
  13.   
  14.    <br/><br/>  
  15.    <b>Meter with value, min and max attribute</b>  
  16.    <meter min="0" max="100" value="17"></meter>  
  17.   
  18.    <br/><br/>  
  19.    <b>Meter (when "min <= value < low")</b>  
  20.    <meter  min="0" max="100" value="17" low="25" high="75"></meter>  
  21.   
  22.    <br/><br/>  
  23.    <b>Meter (when "high < value <= max")</b>  
  24.    <meter  min="0" max="100" value="80" low="25" high="75"></meter>  
  25.   
  26.    <br/><br/>  
  27.    <b>Meter (when "low <= value <= high")</b>  
  28.    <meter  min="0" max="100" value="50" low="25" high="75"></meter>  
  29.   
  30.    <br/><br/>  
  31.    <b>Meter with optimum attribute</b>  
  32.    <meter  min="0" max="100" value="24" low="25" high="75" optimum="80"></meter>  
  33.   
  34.    <br/><br/>  
  35.    <b>Meter with optimum attribute</b>  
  36.    <meter  min="0" max="100" value="80" low="25" high="75" optimum="20"></meter>  
  37.   
  38. </body>      
  39. </html>    
Output of example 1:

   
Styling meter element: we can define various types of styles for the meter element using a progress selector.

Example 2: This example will explain how to increase a width and height of a meter element.
  1. <!DOCTYPE html>      
  2. <html lang="en">      
  3. <head>      
  4.     <meta charset="utf-8" />   
  5.    <style>  
  6.    meter {  
  7.      width: 400px;  
  8.      height: 25px;  
  9.    }  
  10.    </style>     
  11. </head>      
  12. <body>      
  13.    <b>Meter without value</b>  
  14.    <meter></meter>  
  15.   
  16.    <br/><br/>  
  17.    <b>Meter with value but without min and max attribute</b>  
  18.    <meter value="0.8"></meter>  
  19.   
  20.    <br/><br/>  
  21.    <b>Meter with value, min and max attribute</b>  
  22.    <meter min="0" max="100" value="17"></meter>  
  23.      
  24.    <br/><br/>  
  25.    <b>Meter (when "min <= value < low")</b>  
  26.    <meter  min="0" max="100" value="17" low="25" high="75"></meter>  
  27.   
  28.    <br/><br/>  
  29.    <b>Meter (when "high < value <= max")</b>  
  30.    <meter  min="0" max="100" value="80" low="25" high="75"></meter>  
  31.   
  32.    <br/><br/>  
  33.    <b>Meter (when "low <= value <= high")</b>  
  34.    <meter  min="0" max="100" value="50" low="25" high="75"></meter>  
  35.   
  36.    <br/><br/>  
  37.    <b>Meter with optimum attribute</b>  
  38.    <meter  min="0" max="100" value="24" low="25" high="75" optimum="80"></meter>  
  39.   
  40.    <br/><br/>  
  41.    <b>Meter with optimum attribute</b>  
  42.    <meter  min="0" max="100" value="80" low="25" high="75" optimum="20"></meter>  
  43.   
  44. </body>      
  45. </html>    
Output of the Example 2:

       
 
More in styling:<> In my previous article (Progress Bar in HTML 5<>) I have already said that our browser supports various pseudo code classes to style the element. We can classify the browser as follows:
  • <>WebKit/Blink Browser: like Opera, Googe Chrome and Safari
  • <>FireFox
  • <>Internet Explorer
<>1. WebKit/Blink Browser: According to webkit.org we can have 5 different pseudo classes that are given in the following table.

Pseudo Class Description
-webkit-meter-inner-element This is the additional markup, that is used to render the meter element as read only
-webkit-meter-bar This is the Container of the meter element, that holds the value and by using this we can render the container
-webkit-meter-optimum-value

By using the pseudo class we can render the current value of the meter element that belongs inside low and high range.

By default the color of this value is green

-webkit-meter-suboptimum-value

By using this pseudo class we can render the current value of the meter element that belongs outside the low and high range.

By default the color of this value is yellow

-webkit-meter-even-less-good-value

This pseudo code class is used when the value of the optimum attribute belongs outside the low and high range but in an opposite zone.

For example:
value < low < high < optimum

or

value > high > low > optimum

By default its color is red.

Example 3:  This example explains how to reset the appearance of a meter element. To reset the appearance we use -webkit-appearance:none;
  1. <!DOCTYPE html>        
  2. <html lang="en">        
  3. <head>        
  4.     <meta charset="utf-8" />     
  5. <style>    
  6. meter {    
  7.   width: 300px;    
  8.   height: 25px;    
  9.   -webkit-appearance: none; /* Reset appearance */    
  10.   border: 1px solid #ccc;    
  11.   border-radius: 5px;    
  12. }    
  13. </style>       
  14. </head>        
  15. <body>        
  16. <b>Meter without value</b>    
  17. <meter></meter>    
  18.     
  19. <br/><br/>    
  20. <b>Meter with value but without min and max attribute</b>    
  21. <meter value="0.8"></meter>    
  22.     
  23. <br/><br/>    
  24. <b>Meter with value, min and max attribute</b>    
  25. <meter min="0" max="100" value="17"></meter>    
  26.     
  27. <br/><br/>    
  28. <b>Meter (when "min <= value < low")</b>    
  29. <meter  min="0" max="100" value="17" low="25" high="75"></meter>    
  30.     
  31. <br/><br/>    
  32. <b>Meter (when "high < value <= max")</b>    
  33. <meter  min="0" max="100" value="80" low="25" high="75"></meter>    
  34.     
  35. <br/><br/>    
  36. <b>Meter (when "low <= value <= high")</b>    
  37. <meter  min="0" max="100" value="50" low="25" high="75"></meter>    
  38.     
  39. <br/><br/>    
  40. <b>Meter with optimum attribute</b>    
  41. <meter  min="0" max="100" value="24" low="25" high="75" optimum="80"></meter>    
  42.     
  43. <br/><br/>    
  44. <b>Meter with optimum attribute</b>    
  45. <meter  min="0" max="100" value="80" low="25" high="75" optimum="20"></meter>    
  46.     
  47. </body>        
  48. </html>     
Output of the Example 3:

      
 
Example 4: How to render the background container?
According to the preceding table I have described that we can render the container using the -webkit-meter-bar pseudo class, so to apply the rendering I am using the following code:
  1. meter::-webkit-meter-bar {  
  2.   background: none;   
  3.   background-color: whiteSmoke;  
  4.   box-shadow: 0 5px 5px -5px #00F inset;  
  5.   border: 1px solid #0ff;  
  6.   border-radius: 5px;  
  7. }  
Complete Code
  1. <!DOCTYPE html>      
  2. <html lang="en">      
  3. <head>      
  4.     <meta charset="utf-8" />   
  5. <style>  
  6. meter {  
  7.   width: 300px;  
  8.   height: 25px;  
  9.   -webkit-appearance: none; /* Reset appearance */  
  10.   border: 1px solid #F0f;  
  11.   border-radius: 5px;  
  12. }  
  13. meter::-webkit-meter-bar {  
  14.   background: none;   
  15.   background-color: whiteSmoke;  
  16.   box-shadow: 0 5px 5px -5px #00F inset;  
  17.   border: 1px solid #0ff;  
  18.   border-radius: 5px;  
  19. }  
  20.   
  21. </style>     
  22. </head>      
  23. <body>      
  24. <b>Meter without value</b>  
  25. <meter></meter>  
  26.   
  27. <br/><br/>  
  28. <b>Meter with value but without min and max attribute</b>  
  29. <meter value="0.8"></meter>  
  30.   
  31. <br/><br/>  
  32. <b>Meter with value, min and max attribute</b>  
  33. <meter min="0" max="100" value="17"></meter>  
  34.   
  35. <br/><br/>  
  36. <b>Meter (when "min <= value < low")</b>  
  37. <meter  min="0" max="100" value="17" low="25" high="75"></meter>  
  38.   
  39. <br/><br/>  
  40. <b>Meter (when "high < value <= max")</b>  
  41. <meter  min="0" max="100" value="80" low="25" high="75"></meter>  
  42.   
  43. <br/><br/>  
  44. <b>Meter (when "low <= value <= high")</b>  
  45. <meter  min="0" max="100" value="50" low="25" high="75"></meter>  
  46.   
  47. <br/><br/>  
  48. <b>Meter with optimum attribute</b>  
  49. <meter  min="0" max="100" value="24" low="25" high="75" optimum="80"></meter>  
  50.   
  51. <br/><br/>  
  52. <b>Meter with optimum attribute</b>  
  53. <meter  min="0" max="100" value="80" low="25" high="75" optimum="20"></meter>  
  54.   
  55. </body>      
  56. </html>    
Output of the Example 4:

      
Example 5: This example explains how to render the value of the meter element, it means inside the container how to apply the rendering. According to the table we can render the meter elements using the following pseudo classes:
  1. -webkit-meter-optimum-value
  2. -webkit-meter-suboptimum-value
  3. -webkit-meter-even-less-good-value 
Code: I am using the following code:
  1. For -webkit-meter-optimum-value:
    1. meter::-webkit-meter-optimum-value {  
    2.   box-shadow: 0 5px 5px -5px #999 inset;  
    3.   background-image: linear-gradient(  
    4.     25deg,   
    5.     #002900 5%,   
    6.     #003D00 5%,  
    7.     #005200 25%,  
    8.     #007A00 25%,  
    9.     #00A300 55%,  
    10.     #00CC00 55%,  
    11.     #33D633 95%,  
    12.     #66E066 95%,  
    13.     #99EB99 100%  
    14.   );  
    15.   background-size: 100% 100%;  
    16. }  
  2. For -webkit-meter-suboptimum-value:
    1. meter::-webkit-meter-suboptimum-value {  
    2.   box-shadow: 0 5px 5px -5px #999 inset;  
    3.   background-image: linear-gradient(  
    4.     25deg,   
    5.     #333300 5%,   
    6.     #666600 5%,  
    7.     #999900 25%,  
    8.     #CCCC00 25%,  
    9.     #FFFF00 55%,  
    10.     #FFFF33 55%,  
    11.     #FFFFCC 95%,  
    12.     #FF3300 95%,  
    13.     #B22400 100%  
    14.   );  
    15.   background-size: 100% 100%;  
    16. }  
  3. For -webkit-meter-even-less-good-value:
    1. meter::-webkit-meter-even-less-good-value  {  
    2.   box-shadow: 0 5px 5px -5px #999 inset;  
    3.   background-image: linear-gradient(  
    4.     25deg,   
    5.     #000000 5%,   
    6.     #330000 5%,  
    7.     #660000 25%,  
    8.     #990000 25%,  
    9.     #CC0000 55%,  
    10.     #FF0000 55%,  
    11.     #FF3333 95%,  
    12.     #FF6666 95%,  
    13.     #FF9999 100%  
    14.   );  
    15.   background-size: 100% 100%;  
    16. }  
Complete Code:
  1. <!DOCTYPE html>      
  2. <html lang="en">      
  3. <head>      
  4.     <meta charset="utf-8" />   
  5. <style>  
  6. meter {  
  7.   width: 300px;  
  8.   height: 25px;  
  9.   -webkit-appearance: none; /* Reset appearance */  
  10.   border: 1px solid #F0f;  
  11.   border-radius: 5px;  
  12. }  
  13. meter::-webkit-meter-bar {  
  14.   background: none;   
  15.   background-color: whiteSmoke;  
  16.   box-shadow: 0 5px 5px -5px #00F inset;  
  17.   border: 1px solid #0ff;  
  18.   border-radius: 5px;  
  19. }  
  20. meter::-webkit-meter-optimum-value {  
  21.   box-shadow: 0 5px 5px -5px #999 inset;  
  22.   background-image: linear-gradient(  
  23.     25deg,   
  24.     #002900 5%,   
  25.     #003D00 5%,  
  26.     #005200 25%,  
  27.     #007A00 25%,  
  28.     #00A300 55%,  
  29.     #00CC00 55%,  
  30.     #33D633 95%,  
  31.     #66E066 95%,  
  32.     #99EB99 100%  
  33.   );  
  34.   background-size: 100% 100%;  
  35. }  
  36.   
  37. meter::-webkit-meter-suboptimum-value {  
  38.   box-shadow: 0 5px 5px -5px #999 inset;  
  39.   background-image: linear-gradient(  
  40.     25deg,   
  41.     #333300 5%,   
  42.     #666600 5%,  
  43.     #999900 25%,  
  44.     #CCCC00 25%,  
  45.     #FFFF00 55%,  
  46.     #FFFF33 55%,  
  47.     #FFFFCC 95%,  
  48.     #FF3300 95%,  
  49.     #B22400 100%  
  50.   );  
  51.   background-size: 100% 100%;  
  52. }  
  53.   
  54. meter::-webkit-meter-even-less-good-value  {  
  55.   box-shadow: 0 5px 5px -5px #999 inset;  
  56.   background-image: linear-gradient(  
  57.     25deg,   
  58.     #000000 5%,   
  59.     #330000 5%,  
  60.     #660000 25%,  
  61.     #990000 25%,  
  62.     #CC0000 55%,  
  63.     #FF0000 55%,  
  64.     #FF3333 95%,  
  65.     #FF6666 95%,  
  66.     #FF9999 100%  
  67.   );  
  68.   background-size: 100% 100%;  
  69. }  
  70. </style>     
  71. </head>      
  72. <body>      
  73. <b>Meter without value</b>  
  74. <meter></meter>  
  75.   
  76. <br/><br/>  
  77. <b>Meter with value but without min and max attribute</b>  
  78. <meter value="0.8"></meter>  
  79.   
  80. <br/><br/>  
  81. <b>Meter with value, min and max attribute</b>  
  82. <meter min="0" max="100" value="17"></meter>  
  83.   
  84. <br/><br/>  
  85. <b>Meter (when "min <= value < low")</b>  
  86. <meter  min="0" max="100" value="17" low="25" high="75"></meter>  
  87.   
  88. <br/><br/>  
  89. <b>Meter (when "high < value <= max")</b>  
  90. <meter  min="0" max="100" value="80" low="25" high="75"></meter>  
  91.   
  92. <br/><br/>  
  93. <b>Meter (when "low <= value <= high")</b>  
  94. <meter  min="0" max="100" value="50" low="25" high="75"></meter>  
  95.   
  96. <br/><br/>  
  97. <b>Meter with optimum attribute</b>  
  98. <meter  min="0" max="100" value="24" low="25" high="75" optimum="80"></meter>  
  99.   
  100. <br/><br/>  
  101. <b>Meter with optimum attribute</b>  
  102. <meter  min="0" max="100" value="80" low="25" high="75" optimum="20"></meter>  
  103.   
  104. </body>      
  105. </html>    
Output of the Example 5:

      
2. FireFox Browser: For the FireFox browser use "-moz" instead of "-webkit" and everything else is the same.

3. Internet Explorer: In IE you can use all these properties directly, like appearance.
 
Author
Sourabh Somani
Sourabh Somani
0 56.1k 4.3m