Tag meter

The meter tag is a semantic HTML5 element used to display a scalar measurement within a known range, such as scores, disk usage, battery level, or progress toward a goal. It’s ideal for showing values with meaning, unlike <progress>, which only tracks completion.

---

📌 What Is the <meter> Tag?

The <meter> element represents a numeric value between a minimum and maximum. It provides a visual bar and can include optional thresholds for low, high, and optimum values.

---

🧪 Basic Example

<label for="disk">Disk usage:</label>
<meter id="disk" value="0.7">70%</meter>

💾 This displays a bar filled to 70% to show current disk usage.

---

⚙️ Key Attributes

Attribute	Description	Example
value	Current value (required)	value="0.7"
min	Minimum value (default is 0)	min="0"
max	Maximum value (default is 1)	max="1"
low	Lower limit of optimal range	low="0.3"
high	Upper limit of optimal range	high="0.9"
optimum	Best/ideal value	optimum="0.5"

---

📷 Advanced Example with Visual Thresholds

<label for="battery">Battery level:</label>
<meter id="battery" value="0.2" min="0" max="1" low="0.25" high="0.75" optimum="1">
  20%
</meter>

🔋 In this example:

• Below 0.25 → Low (usually rendered in red)
• Between 0.25 and 0.75 → Normal
• Above 0.75 → High
• Optimum is 1 (full battery)

💡 Browsers may style the bar differently based on these values.

---

🧩 Structure Diagram

php-templateCopyEdit<label>Text</label>
<meter value="X" min="A" max="B" low="L" high="H" optimum="O">Optional Text</meter>

---

🎯 Use Cases for <meter>

Use Case	Description
✔️ Battery level	Show charge percentage
✔️ Score display	Exam/test scores out of 100
✔️ Quota usage	Cloud storage, data plan, disk space
✔️ Performance gauge	CPU usage or web vitals

---

🖌️ Styling the <meter> Tag

The <meter> element is natively styled by browsers, but you can apply CSS:

meter::-webkit-meter-bar {
  background: #eee;
}
meter::-webkit-meter-optimum-value {
  background: green;
}
meter::-webkit-meter-suboptimum-value {
  background: orange;
}
meter::-webkit-meter-even-less-good-value {
  background: red;
}

⚠️ Full styling support is limited and vendor-prefixed.

---

🚫 Don’t Confuse With <progress>

Tag	Purpose	Example Use
<meter>	Displays a value within a range	Battery, score
<progress>	Shows task completion (0–100%)	File upload

---

✅ Accessibility Tips

• Always use <label for="id"> to describe the meter.
• Provide text inside <meter> for screen readers (Battery: 20%).
• Make sure color is not the only indicator of status.

---

✅ Conclusion

The <meter> tag is a clean, semantic way to show values within a known range. It’s perfect for scores, capacities, and thresholds where users need to visually interpret numeric data. While styling is somewhat limited, its semantic value and accessibility make it a smart choice in many UI situations.

---