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.

<h2>Attributes</h2>

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) and supports all the usual [events](https://developer.mozilla.org/en-US/docs/Web/API/Event)  supported by HTML elements.

<h2>Example</h2>

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



<html>
 
 <head>
   <title>Meter Element in HTML</title>
 </head>

 <body>
   
   <label for="low_battery">Low Battery:</label>

    <meter id="low_battery"
          min="0" max="100"
          low="33" high="66" optimum="80"
          value="20">
    </meter>
    
    <br>

    <label for="high_battery">High Battery:</label>

    <meter id="high_battery"
          min="0" max="100"
          low="33" high="66" optimum="80"
          value="70">
    </meter>
 
 </body>
</html>

codemirror

<h2>Explanation</h2>

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter).





What is the <meter> element in HTML?

The <meter> element in HTML represents a scalar measurement within a specified range and is useful for indicating values like disk usage or battery percentage.