HTML <meter> element

The <meter> element represents a measured value inside a known range. It is useful when the page is not showing a task being completed, but a value being judged against lower and upper limits.

Good examples include storage use, signal strength, battery charge, search relevance, voting share, score inside a known scale, or temperature inside a defined safe range. In each case, the number only makes proper sense because the surrounding range is known.

The most basic form uses value, min, and max. For example, value="70" min="0" max="100" means seventy on a scale from zero to one hundred. The value attribute is required and should lie within the specified range. If omitted, min defaults to 0 and max to 1.

The low and high attributes mark the boundaries between low, middle, and high regions. Keep them in order within the range: min ≤ low ≤ high ≤ max. The optimum attribute identifies a preferred value within that range; its position indicates which region is preferred.

This element should not be used for progress through a task. A value such as 70% could mean many things, and HTML keeps the distinction clear: <progress> is for completion of work; <meter> is for a measurement inside a range.

For storage usage, lower values may be preferred. The example sets low="50", high="80", and optimum="20" on a 0–100 scale. The preferred value lies in the low region; the current value of 70 lies in the middle region. A value above 80 would be in the high region, furthest from the preferred one.

Give the gauge an associated <label> and show its value and units beside it. Text inside the element provides fallback content but does not supply its accessible label. Native colours and appearance vary, so explain the measurement in text rather than relying on colour alone.

Attributes: value, min, max, low, high, optimum, GLOBALS.

Typical layout:
<p><label for="pf-demo-storage">Storage used</label><br>
<meter id="pf-demo-storage" min="0" max="100"
  low="50" high="80" optimum="20" value="70">70%</meter>
70% used</p>
<p>Lower usage is preferred; usage above 80% is in the high region.</p>

Visual representation: