HTML meter Tag: Measurements with Examples

Purpose and use cases: The HTML meter tag shows a scalar value within a known range.

You can use it for:

• Stats
• Progress levels
• Scores
• Resource usage

Understand the <meter> Tag in HTML

The <meter> tag displays a value on a fixed scale. It shows where the value sits in the range. It works well for scores, battery levels, disk space, or benchmarks.

The syntax looks like this:

<meter value="X" min="Y" max="Z">Fallback text</meter>

It shows the visual level bar. The value must fall between the min and max.

Required and Optional Attributes:

Required:

• value – Current value shown by the meter.

Optional:

• min – Lowest limit of the scale.
• max – Highest limit of the scale.
• low, high, optimum – Ranges that affect color or status.
• form – Links the meter to a form.

Here is a quick example:

<meter value="7" min="0" max="10">7 out of 10</meter>

This shows a bar that fills up to 70%. The value is 7 on a scale from 0 to 10. It renders a colored level inside the bar.

Use for these cases:

• Show scores
• Show battery or fuel levels
• Show memory, storage, or usage

It updates the value dynamically with JavaScript:

<meter id="speed" min="0" max="100" value="30"></meter>
<script>
  document.getElementById("speed").value = 60;
</script>

This updates the meter to 60 from 30 in real time.

Attributes of the <meter> Tag in HTML

The value attribute:

This sets the current number. It must be between min and max.

The min and max attributes:

These set the full range. The browser compares the value to these bounds.

low – high – optimum:

These affect how the meter looks:

• low defines a lower warning level.
• high defines an upper warning level.
• optimum defines the best value.

Here is the tag:

<meter value="40" min="0" max="100" low="20" high="80" optimum="50"></meter>

The browser can change the bar color if the value is outside the low or high range.

Form Attribute and Its Role:

Use form to link the meter to a specific form:

<form id="sysForm"></form>
<meter value="60" min="0" max="100" form="sysForm"></meter>

This allows the meter to act as a field inside a form.

Visual Representation and Browser Support

Browsers render as a horizontal bar. The bar fills based on the value. The style may vary across systems.

Modern browsers support it:

• Chrome: Yes
• Firefox: Yes
• Safari: Yes
• Edge: Yes

Old versions of IE do not support.

How to Style the <meter> Tag with CSS

You can style the meter with CSS. But some browsers limit style parts like the bar color. Use pseudo-elements or vendor prefixes when needed.

<style>
meter {
  width: 100%;
  height: 25px;
}
</style>

This sets the bar width and height.

<style>
meter::-webkit-meter-optimum-value {
  background: green;
}
meter::-webkit-meter-suboptimum-value {
  background: orange;
}
meter::-webkit-meter-even-less-good-value {
  background: red;
}
</style>

This changes the color based on value ranges. It works in Chrome and Safari.

Examples

CPU Load Meter:

<label for="cpu">CPU Load:</label>
<meter id="cpu" value="55" min="0" max="100">55%</meter>

This shows CPU usage. The value is 55 out of 100. It helps users see system load in real time.

Score Rate Meter:

<label for="score">Performance Score:</label>
<meter id="score" value="72" min="0" max="100" low="40" high="85" optimum="90"></meter>

This shows a performance score. The bar fills up to 72%. The color can change if it drops below 40 or rises above 85.

Disk Space Usage:

<label for="disk">Disk Space Used:</label>
<meter id="disk" value="80" min="0" max="100">80%</meter>

This tracks disk space. It shows how full the drive is. The bar fills to 80% of the full range.

Live Update via JavaScript:

<label for="speed">Speed:</label>
<meter id="speed" min="0" max="200" value="90"></meter>
<script>
  setTimeout(() => {
    document.getElementById("speed").value = 120;
  }, 2000);
</script>

This changes the value after 2 seconds. It updates the meter from 90 to 120. It shows how to control the meter with code.

Wrapping Up

In this article, you learned what the HTML <meter> tag does and how it works. You also saw how to use its attributes and update it with JavaScript.

Here is a quick recap:

• Use to show a value on a scale.
• Use value, min, max, low, high, optimum, and form to control behavior.
• Style it with basic or WebKit-specific CSS.
• Update values with JavaScript.

<label for="disk">Disk usage:</label>
<meter id="disk" value="70" min="0" max="100">70%</meter>

<meter value="6" min="0" max="10"></meter>

<progress value="50" max="100"></progress>

<meter value="6" min="0" max="10" low="2" high="8" optimum="7"></meter>

<style>
  meter {
    width: 100px;
    height: 20px;
  }
</style>

<meter value="60" min="0" max="100"></meter>

Similar Reads