cyberangles blog

HTML | `<meter>` value Attribute

In the world of web development, HTML provides a variety of elements to display different types of data. One such useful element is the <meter> element. The <meter> element is used to represent a scalar measurement within a known range, or a fractional value. The value attribute of the <meter> element plays a crucial role in determining the current value of the meter. This blog post will delve deep into the <meter> value attribute, exploring its functionality, common practices, best practices, and providing example usage.

2026-06

Table of Contents#

  1. What is the <meter> Element?
  2. Understanding the value Attribute
  3. Common Practices for Using the value Attribute
  4. Best Practices for Using the value Attribute
  5. Example Usage of the value Attribute
  6. Conclusion
  7. References

What is the <meter> Element?#

The <meter> element in HTML is used to represent a scalar measurement within a known range, or a fractional value. It is often used to display a quantity such as disk usage, the relevance of search results, or the completion progress of a task. The <meter> element has several attributes, including min, max, low, high, optimum, and the value attribute.

Here is a basic syntax of the <meter> element:

<meter min="0" max="100" value="50">50 out of 100</meter>

In this example, the min attribute is set to 0, the max attribute is set to 100, and the value attribute is set to 50. The text inside the <meter> tags is used as fallback content for browsers that do not support the <meter> element.

Understanding the value Attribute#

The value attribute of the <meter> element represents the current value of the meter. It must be a valid floating-point number. If the value attribute is not specified, the default value is 0.

The value attribute must be within the range specified by the min and max attributes. If the value is less than the min value, it will be treated as equal to the min value. If the value is greater than the max value, it will be treated as equal to the max value.

Common Practices for Using the value Attribute#

  • Provide a valid number: As mentioned earlier, the value attribute must be a valid floating-point number. For example, value="25.5" is a valid value, while value="twenty-five" is not.
  • Keep the value within the range: Always ensure that the value is within the range specified by the min and max attributes. This ensures that the meter displays correctly and provides accurate information to the user.
  • Use fallback content: Include fallback content inside the <meter> tags. This content will be displayed in browsers that do not support the <meter> element.

Best Practices for Using the value Attribute#

  • Use descriptive text: Along with the value attribute, use descriptive text inside the <meter> tags to provide additional context to the user. For example, instead of just displaying a number, you can say "50% disk usage".
  • Update the value dynamically: If the value of the meter changes over time, use JavaScript to update the value attribute dynamically. This provides a more interactive experience for the user.
  • Consider accessibility: Ensure that the meter is accessible to all users. Use ARIA (Accessible Rich Internet Applications) attributes to provide additional information to screen readers.

Example Usage of the value Attribute#

Basic Example#

<!DOCTYPE html>
<html>
 
<body>
 
  <h2>Basic Meter Example</h2>
  <meter min="0" max="100" value="70">70 out of 100</meter>
 
</body>
 
</html>

In this example, the meter represents a value of 70 out of 100.

Dynamic Example#

<!DOCTYPE html>
<html>
 
<body>
 
  <h2>Dynamic Meter Example</h2>
  <meter id="myMeter" min="0" max="100" value="20">20 out of 100</meter>
  <button onclick="updateMeter()">Update Meter</button>
 
  <script>
    function updateMeter() {
      var meter = document.getElementById("myMeter");
      var newValue = parseInt(meter.value) + 10;
      if (newValue > 100) {
        newValue = 100;
      }
      meter.value = newValue;
      meter.innerHTML = newValue + " out of 100";
    }
  </script>
 
</body>
 
</html>

In this example, the value of the meter can be updated dynamically by clicking the "Update Meter" button.

Conclusion#

The value attribute of the <meter> element is a powerful tool for displaying scalar measurements within a known range. By understanding its functionality, following common and best practices, and using it in various examples, you can effectively use the <meter> element to provide meaningful information to your users.

References#