<meter>

<meter> Tag

The HTML <meter> element represents a scalar value within a defined range or a fractional value.

Syntax

<meter value="current" min="minimum" max="maximum" low="low" high="high" optimum="optimum">
  Fallback content if `<meter>` is not supported.
</meter>

<meter> Demo

<h1>The <meter> Element</h1>

<p>The <meter> element is used to display a gauge:</p>

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>

<p><strong>Note:</strong> The `<meter>` tag is not supported in Edge 12 (or earlier).</p>

Definition and Usage

The <meter> tag represents a measurable value within a defined range, often used for gauges.

• Used for displaying disk space usage, search relevance, and other metrics.

Attributes

• value: The current value, which must be between min and max if specified. The default is 0.
• min: The lower limit of the range, with a default of 0.
• max: The upper limit of the range, with a default of 1.
• low: Sets the upper limit of the "low" range, which must be between min and high.
• high: Sets the lower limit of the "high" range, which must be between low and max.
• optimum: Indicates the ideal value within the range.
• form: Links the <meter> element to a form.

See Also

Conclusion

The <meter> tag is used to represent a scalar value within a defined range, offering a visual gauge for metrics like disk usage or performance. It is ideal for displaying measurable values but should not be used for progress indicators—<progress> is more suitable for that purpose. By linking it with a <label>, it improves accessibility.