Meter HTML

by

HTML <meter> Tag

To specify a scalar measurement with range or in more simple words, to measure data within a given range. the HTML <meter> tag is used. Also known as a gauge, this tag is used to display disk usage, voting population, etc. It was introduced in HTML5.

Example 1:

<!DOCTYPE html>
<html>
<body>
<p>Gauge Example 1:</p>
<meter value="10" min="0" max="20">10 out of 20</meter><br>
<p>Gauge Example 2:</p>
<meter value="1">100%</meter>
</body>
</html>

Explanation:

In the above example, we are using the HTML <meter> tag to display a gauge.

Example 2: Styling Meters using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
meter{  
  width: 400px;  
  height: 40px; 
} 
</style>
</head>
<body>
<p>Gauge Example 1:</p>
<meter value="10" min="0" max="20">10 out of 20</meter><br>
<p>Gauge Example 2:</p>
<meter value="1">100%</meter>
</body>
</html>

Explanation:

In the above example, we are using the CSS properties to style a gauge.

Tag specific Attributes:

Attribute Value Uses
value number Used to define a value in numbers which can be an integer or a floating point number. It is a required attribute.
form form_id Used to define a form or multiple forms to which the <meter> element belongs to.
high number Used to define a range that is considered as high value.
low number Used to define a range that is considered as low value.
max number Used to define the maximum value defined in the range.
min number Used to define the minimum value defined in the range.
optimum number Used to define the optimum value for the gauge.

Global attributes:

The HTML global attributes are supported by the HTML <meter> tag.

Event attributes:

The HTML event attributes are supported by the HTML <meter> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.