What is the <meter> element in HTML?

The <meter> element in HTML represents a scalar measurement within a specified range or a fractional value. <meter> can help a user gauge the level of an entity, e.g., disk usage, battery percentage, etc.

It is important to note that the <meter> element should not be used to indicate progress (HTML provides a <progress> element for this purpose). Similar to most HTML elements, the <meter> element can be styled using CSS.

Attributes

The <meter> element includes the following attributes:

• max: The maximum value of the measured range.
• min: The minimum value of the measured range; this value must be less than the value of the max attribute. The min value is $0$ by default.
• value: A required attribute that specifies the current numeric value; this numeric value must be within the range specified by the min and max attributes. The value attribute will contain $0$ if unspecified or malformed.
• low: The upper bound for what is considered a “low” value in the measured range. The value of low must be greater than min, and less than both max and high if specified. If unspecified, the value of low is set equal to min.
• high: The lower bound for what is considered a “high” value in the measured range. The value of high must be less than max, and greater than both min and low if specified. If unspecified, the value of high is set equal to the value of max.
• form: Specifies which <form> element the <meter> element is associated with.
• optimum: Specifies the optimal value for the measured range.

The <meter> element also includes global attributes and supports all the usual events supported by HTML elements.

Example

The code below shows how the <meter> element works in HTML:

Explanation

The code above initializes $2$ identical <meter> elements that differ only in their value attribute to represent a low and high battery level.

Each <meter> element is associated with a corresponding <label> element. You can do this by ensuring that the id attribute of the <meter> element matches the for attribute of the <label> element it is meant to associate with. For example, the <meter> element in line $11$ is associated with the <label> element in line $9$ because the id and for attributes both contain the string “low_battery.”

Since the min and max attributes are specified as $0$ and $100$ respectively, the value attribute of these <meter> elements can take any numerical value in this range. Since the value of low is set to $33$, values between $0$ and $33$ are considered “low” for the specified range. Similarly, values between $66$ and $100$ are considered “high” because the high attribute is set to $66$.

The value of the <meter> element in line $11$ is $20$, which falls in the range of “low” values. Therefore, the color of the <meter> element indicates a low battery level. In contrast, the value of the <meter> element in line $21$ is $70$, which falls in the range of the “high” values, and so the color of the <meter> element indicates a high battery level.

Note: For further details regarding the <meter> element, you can check the documentation.