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>Output
Browser Output
html
You will see a horizontal meter bar showing the current value (65%) relative to its range (0–100).
The bar visually indicates low, high, and optimum values if specified.
Try it in our TryIt Editor to experiment with different values and ranges.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.