Google News
logo
HTML5 Meter Tag
The HTML <meter> tag is used for indicating a scalar measurement within a known range, or a fractional value.

Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.
Specific Attributes
Attribute Description
value Specifies the "measured" value.
min Specifies the lower bound of the range. Default is 0.
low Specifies the range that is considered to be a "low" value.
high Specifies the range that is considered to be a "high" value.
max Specifies the upper bound of the range. Default is 1.
optimum Specifies 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.
Example :
	
<!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>
Output :
  1. 25%
  2. 50%
  3. 75%
  4. 100%
Width :
125mm
Height :
100mm