Description
The HTML element <meter>
is used to define a scalar measurement within a known range or a fractional value.
It is also known as a gauge.
The below table summarizes its usage.
Usage Details | |
Placement | It is displayed as an Inline element. |
Contents | It can contain the Inline elements and text, except the <meter> element. |
Tags | Both the opening and closing tags are required. |
Versions | HTML 5 |
Syntax
Here is the basic syntax of the <meter>
element.
<meter value="10">...</meter>
Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example - HTML Element meter</title>
</head>
<body>
<p>Disk Usage: <meter value="0.6">60%</meter></p>
<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter></p>
<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>
</body>
</html>
Attributes
The following table shows the list of supported and unsupported attributes for the <meter>
element.
Attribute Type | Details |
Element-Specific Attributes | The tag <meter> has some element-specific attributes listed in the below table. |
Global Attributes | Like all other HTML tags, the tag <meter> supports the HTML Global Attributes. |
Event Attributes | The tag <meter> also supports the HTML Event Attributes. |
Here is a list of attributes that are specific to the <meter>
element.
Attribute | Value | Description |
value (required) |
number | Specifies the current value of the meter or gauge, which must be between the minimum and maximum values if specified. |
form |
form-id | Associates the <meter> element with the <form> element. |
high |
number | Specifies the range that is considered to be a high value. |
low |
number | Specifies the range that is considered to be a low value. |
max |
number | Specifies the maximum value of the range. |
min |
number | Specifies the minimum value of the range. |
optimum |
number | Indicates the optimal value for the gauge. |
Browser Compatibility
The tag <meter>
is supported in all modern browsers.
- Google Chrome 8+
- Internet Explorer or Edge x
- Firefox 6+
- Apple Safari 6+
- Opera 11+