Learn HTML – Part 52 – meter Tag – Measurement Gauge
The HTML meter tag is used to display a measurement within a known range.
It is commonly used to show values like battery level, disk usage, or ratings.
What is the meter Tag?
The meter element represents a scalar value within a defined range.
Unlike the progress tag, it is used for measurements rather than task progress.
Basic Syntax
<meter value="70" min="0" max="100"></meter>
This example shows a measurement value of 70 out of 100.
Example – Simple Meter
<label>Battery Level:</label><br>
<meter value="70" min="0" max="100"></meter>
Output:
Important meter Attributes
| Attribute | Description |
|---|---|
value | Current value |
min | Minimum value |
max | Maximum value |
low | Low range threshold |
high | High range threshold |
optimum | Optimal value |
Example – Meter with Range Indicators
<label>Disk Usage:</label><br>
<meter value="80" min="0" max="100" low="30" high="70" optimum="50"></meter>
Output:
Difference Between meter and progress
| Feature | meter | progress |
|---|---|---|
| Purpose | Measurement | Task progress |
| Use Case | Battery, rating | Loading, uploading |
Why Use meter?
- Displays measurements clearly
- Shows ranges like low, high, and optimal values
- Improves user interface
- Useful for dashboards and indicators
The
metertag represents a measurement within a known range.
Common Mistakes Beginners Make
- Using meter for task progress instead of progress tag
- Not defining min and max values
- Confusing meter with progress
Conclusion
The HTML meter tag is used to represent measurements such as levels, ratings, and usage values.
It helps users visually understand data within a defined range.
What’s Next?
Now that you understand the meter tag, the next step is learning about the details tag, which is used to create expandable content sections.
Next: Learn HTML – Part 53 – details Tag – Expandable Content →
Series: Learn HTML Series
