HTML - <meter> Tag

The HTML <meter> tag represents either a scalar value within a known range or a fractional value. This is also known as gauge.

Following is the attribute of the <meter>tag −

S.No.	Attribute & Description
1	value It is a mandatory attribute that is used to specify a value in numbers. The number may be an integer or floating-point number.
2	form Specifies the one or more forms to which the meter element belongs.
3	high Specifies the range that is considered to have a high value.
4	low Specifies the range that is considered to be a low value.
5	max Specifies the maximum value of the range.
6	min Specifies the minimum value of the range. The default value is 0.
7	Optimum It is an optional attribute that is used to specifies the optimum value for the gauge.

Syntax

Following is the syntax of <meter> tag −

<meter id=" " min=" " max=" " low=" " high=" " value=" "> …content </meter>

Example

In the following example, we are creating an HTML document and mapping the fuel level with the help of the <meter> tag, as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      label {
         padding-right: 10px;
         font-size: 1rem;
      }
   </style>
</head>
<body>
   <label for="fuel">Fuel level:</label>
   <meter id="fuel" min="0" max="100" low="35" high="70" optimum="80" value="50"> at 100/100 </meter>
</body>
</html>

When we run the above code, it will generate an output displaying the fuel level on the webpage.

Example

Considering the following example, we are displaying a scalar value within a given range for the disc usage, as follows −

<!DOCTYPE html>
<html>
<body>
   <h1>The meter element</h1>
   <label for="disk_c">Disk usage C:</label>
   <meter id="disk_c" value="5" min="0" max="10">2 out of 10</meter>
   <br>
   <label for="disk_d">Disk usage D:</label>
   <meter id="disk_d" value="0.8">100%</meter>
</body>
</html>

On running th above code, the output window will pop up displaying the space consumed by the disc on the webpage.

html_tags_reference.htm