The meter Tag

The meter tag draws a horizontal bar that shows one measurement against a known scale. Disk usage, battery charge, a quiz score out of twenty, a temperature reading: anything where a number sits inside a fixed range fits. You provide the value, min, and max, and the browser paints the bar.

The bar colors itself. Values near the low end render red or orange, the middle of the range is yellow, and the top turns green. You control those thresholds with the low, high, and optimum attributes, and the browser handles the visual logic.

Why it exists: gauges were another thing every site drew by hand, with nested divs and width percentages. Meter turns the pattern into markup. It is supported in every modern browser, and the text between the tags is read aloud by screen readers as a fallback.

Reading the attributes

value holds the current measurement and is the only required attribute. min and max set the scale, defaulting to 0 and 1. The low and high attributes split the range into zones, and optimum says where the best value sits, which decides the color logic.

<meter min="0" max="100" low="30" high="70" optimum="80" value="85">85 percent</meter>

Meter vs progress

People mix these up. Meter shows a measurement inside a fixed range: disk usage, score, temperature. Progress shows how much of a task is done: uploads, downloads, loading. If the number grows toward a goal, use progress. If it floats inside a range, use meter.

Syntax

<meter value="0.7" min="0" max="1">70 percent</meter>

<meter min="0" max="100" low="30" high="80" optimum="95" value="60">60%</meter> // disk, not progress