HTML <meter> Element
The HTML <meter> element represents a numeric measurement within a known range, such as disk usage, a rating, or a test score.
Syntax
<meter min="0" max="100" value="75">75%</meter>The <meter> element requires both an opening and closing tag. The value attribute specifies the current measurement, while min and max define the range.
Attributes
The <meter> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
value |
Specifies the current numeric measurement represented by the meter. |
min |
Specifies the lower boundary of the measurement range. The default value is 0. |
max |
Specifies the upper boundary of the measurement range. The default value is 1. |
low |
Specifies the upper boundary of the range considered to be low. |
high |
Specifies the lower boundary of the range considered to be high. |
optimum |
Specifies the value that represents the preferred or optimum part of the measurement range. |
Example
This example uses the <meter> element to show how much storage space is currently being used within a known capacity.
Usage Notes
Use the <meter> element when a numeric value is being compared with a defined minimum and maximum range. Examples include storage usage, ratings, test scores, temperatures within a specified range, and other measurable quantities.
The low, high, and optimum attributes can provide additional meaning to portions of the range. Browsers may use these values when determining how the meter is visually presented.
Do not use <meter> to show the progress of a task that is still being completed. Use the <progress> element when representing the completion progress of an operation.
Accessibility
Provide text that identifies what the <meter> measures so users do not have to determine its purpose from the graphical meter alone. When appropriate, include the measurement as readable text, such as "75 GB of 100 GB used."
Do not rely only on the meter's color or visual appearance to communicate whether a value is low, high, acceptable, or undesirable. Important information should also be understandable from the surrounding text.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <meter> Element .
Related Elements
The <meter> element is related to the <progress> element, which represents the completion progress of a task, and the <label> element, which can provide an accessible label for a meter.