Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html

What is the <meter> element in HTML?

Talha Ashar

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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 00 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 00 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 22 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 1111 is associated with the <label> element in line 99 because the id and for attributes both contain the string “low_battery.”

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

The value of the <meter> element in line 1111 is 2020, 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 2121 is 7070, 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.

RELATED TAGS

html

CONTRIBUTOR

Talha Ashar
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring