The <meter> Element

Technical Summary

Definition / Categories

Item	Definition
Meaning	A gauge representing a scalar measurement within a known range or a fractional value
Categories	Flow content, phrasing content, labelable, palpable
Context	Where phrasing content is expected
Content model	Phrasing content, with no descendant meter element
Tag omission	Neither the start tag nor the end tag is omissible
Content attributes	Global attributes, value, min, max, low, high, and optimum
DOM interface	HTMLMeterElement

Meaning boundary: meter, progress, and output

Element	Primary meaning	Selection condition
meter	A measurement within a range	Show the current position of a bounded value
progress	Task completion	Show how much of a process is complete
output	A calculation or action result	Show a result produced from input or processing

A gauge-like appearance is not enough to choose the element. Separate whether the claim is about a bounded state, task completion, or a produced result.

Six attributes and their roles

Attribute	Specification role
min	Lower bound of the range; defaults to 0.
max	Upper bound of the range; defaults to 1.
value	Measured value indicated by the gauge; it is an authoring requirement.
low	Upper boundary of the low range.
high	Lower boundary of the high range.
optimum	Optimum point, used to determine whether lower, higher, or middle values are preferred.

The six attributes are parsed as valid floating-point numbers and resolved under range constraints. Units are not defined by a dedicated meter attribute; provide units in surrounding text or, where useful, the title attribute.

Value resolution

User agents parse the attributes as numbers and resolve the gauge points in the following order.

1. Minimum: use a valid min, or 0 if it is absent.
2. Maximum: use a valid max, or 1 if it is absent. If the candidate is below minimum, maximum becomes minimum.
3. Actual value: use a valid value, or 0 if it is absent. Clamp it to the resolved range.
4. Low boundary: use a valid low, or minimum if it is absent. Clamp it to the range.
5. High boundary: use a valid high, or maximum if it is absent. Do not resolve it below low.
6. Optimum point: use a valid optimum, or the midpoint between minimum and maximum if it is absent. Clamp it to the range.

The result satisfies minimum ≤ actual value ≤ maximum, minimum ≤ low boundary ≤ high boundary ≤ maximum, and minimum ≤ optimum point ≤ maximum. If min and max are absent, the range is 0–1.

Low, high, and optimum

If optimum is below low, the lower region is optimum. If it is above high, the higher region is optimum. Otherwise the middle region is optimum. User agents control the actual rendering, so color alone is not evidence of the meaning.

<label for="storage-meter">Storage usage</label>
<meter id="storage-meter" min="0" max="100" low="50" high="80" optimum="20" value="72" title="Usage">72 / 100</meter>

This example expresses that lower storage usage is preferred with optimum="20". A current value of 72 is in the high range, but it is not the optimum value.

Fallback text and labeling

The specification encourages authors to include a textual representation of the gauge state for user agents that do not use the native rendering. Explain what is being measured with label or another accessible name, and do not make the number, unit, or range depend on color alone.

<label for="quota-meter">API quota used</label>
<meter id="quota-meter" min="0" max="1000" value="640" title="requests">640 of 1000 requests</meter>

meter is labelable, but it is not a submittable form control. If a submission value is needed, synchronize a separate hidden input or another form control.

DOM Interface

API	Meaning	Boundary
value	Resolved actual value as a double	Invalid and out-of-range values are exposed after resolution
min / max	Resolved minimum and maximum	Includes correction when the candidate maximum is below minimum
low / high	Resolved low and high boundaries	Resolved so that low ≤ high
optimum	Resolved optimum point	Out-of-range candidates are clamped to the range
labels	Readonly NodeList of associated label elements	Entry point for observing the labelable relationship

Fact / Evidence

Specification meaning, value resolution, DOM APIs, and accessibility mappings are recorded separately from browser observations. Implementation observations are registered below.

Evidence

1. HTML Standard: The meter element — meaning, categories, attributes, value resolution, and DOM interface
2. HTML Accessibility API Mappings: meter — element role and value/min/max mapping entry points
3. Web Platform Tests: HTML forms — entry point for selecting meter-related specification tests

Implementation Evidence

This section records what a browser actually showed. It keeps the written standard separate from observations in one browser, and names the areas that still need checking.

Fixture used: meter-v1 checked default values, invalid values, out-of-range values, values available to JavaScript, and the association with each label. It also includes range-boundary attributes.

An observation in one environment is not registered as a result common to all browsers, platform APIs, or assistive technologies.

Coverage / Open Issues

• ReviewedMeaning, categories, context, content model, tag omission, and content attributes
• ReviewedSpecification roles and value-resolution model for min, max, value, low, high, and optimum
• ReviewedMain HTMLMeterElement APIs and the HTML-AAM meter mapping entry point
• OpenChrome, Firefox, and Safari comparisons for attributes, IDL, rendering, and low/high/optimum
• OpenRemaining WPT coverage and cross-browser differences for boundary, invalid, and dynamic values
• OpenComplete HTML-AAM mapping, platform APIs, assistive-technology output, and unit/title implementation differences

These results cover one Chrome 154 environment and two selected WPT files. Other browsers, Windows UI Automation, assistive technology, and value changes after interaction remain unchecked.

Related surface

For a beginner-friendly explanation of measurements, form submission boundaries, and the distinction from progress and output, see the meter element page in Yugien. For task completion, see the progress element; for calculation results, see the output element.