HTML Tags
HTML <meter> Tag
The
<meter>tag is used to represent a scalar measurement within a known range, such as disk usage, battery level, or progress percentage.
It is different from<progress>, as it can show a measurement that is not necessarily complete, but has a min and max value.
<meter>is useful for visualizing numerical data in forms or dashboards.
Syntax
html
<meter value="current" min="minValue" max="maxValue" low="lowValue" high="highValue" optimum="optimumValue">
Fallback text
</meter>Attributes
| Attribute | Description |
|---|---|
| value | Current numeric value. |
| min | Minimum value (default is 0). |
| max | Maximum value (default is 1). |
| low | Range that is considered “low.” |
| high | Range that is considered “high.” |
| optimum | The ideal value. |
| form | Associates the meter with a form. |
| id | Assigns a unique ID. |
| name | Name of the meter element. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter Tag Example</title>
</head>
<body>
<h2>Battery Level</h2>
<label for="battery">Battery:</label>
<meter id="battery" value="65" min="0" max="100" low="20" high="80" optimum="90">
65%
</meter>
<p>The battery level is at 65%.</p>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports <meter> tag.
Notes
<meter>is semantic for measurements and can be styled using CSS.- Use
low,high, andoptimumto indicate different levels visually. - Not supported in older Internet Explorer versions.
- Can be combined with
<label>or<output>for more descriptive forms.
Conclusion
The <meter> tag provides a visual representation of scalar data within a defined range.
It improves usability and accessibility for displaying measurements like battery levels, scores, or progress indicators.