What is the Meter Element? | HTML Interview Questions

What You'll Learn

Using the meter element
Threshold attributes
Styling meters

The Meter Element

The <meter> element represents a scalar measurement within a known range - like disk usage, test scores, or relevance. It's NOT for progress (use <progress> for that).

Key Attributes

Attribute	Purpose
`min`	Minimum value
`max`	Maximum value
`value`	Current value
`low`	Low threshold
`high`	High threshold
`optimum`	Optimal value

Basic Examples

index.htmlHTML

<!-- Basic meter -->
<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" value="75">75%</meter>

<!-- With thresholds -->
<label for="score">Test score:</label>
<meter id="score"
       min="0" max="100"
       low="33" high="66" optimum="100"
       value="85">85/100</meter>

<!-- Disk usage (low is good) -->
<label for="disk">Disk usage:</label>
<meter id="disk"
       min="0" max="100"
       low="30" high="70" optimum="0"
       value="45">45%</meter>

Browser Coloring

Browsers color the meter based on whether value is in optimal, suboptimal, or bad range relative to low/high/optimum.