HTML <meter> (Scalar Gauge) Tag
Example
<label for="one">meter one:</label>
<meter id="one" value="4" min="0" max="10">4 out of 10</meter><br>
<label for="two">meter two:</label>
<meter id="two" value="0.4">40%</meter>
Meaning
The <meter> element defines a scalar measurement within a known range, similar to what might be represented by a gauge.
Notes:
- A min value cannot be greater than a max value.
- A low value can’t be greater than a high value.
- An optimum value cannot be greater than a high value.
- The <meter> element should not be used to specify progress bar. For progress bars, use the <progress> tag.
Version: HTML5
Standard Syntax
<meter value="number">...</meter>
Browser Support
Status
Attributes
Attribute | Value | Description |
---|---|---|
form | formId | Specifies which form the <meter> element belongs to. |
high | number | Specifies the range that is considered to be a high value |
low | number | Specifies the range that is considered to be a low value |
max | number | Specifies the maximum value of the range |
min | number | Specifies the minimum value of the range. Default value is 0 |
optimum | number | Specifies what value is the optimal value for the gauge |
value | number | Required. Specifies the current value of the gauge |
Global Attributes
<meter> element also supports the Global Attributes in HTML.
Event Attributes
<meter> element also supports the Event Attributes in HTML.
By Default CSS Value(s)
None.