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">10 </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">10
</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.
