THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <meter> Tag


Example

Use the meter element to measure data within a given range (a gauge):

<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>
Try it Yourself »

Definition and Usage

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<meter> 8.0 13.0 16.0 6.0 11.5

Differences Between HTML 4.01 and HTML5

The <meter> tag is new in HTML5.



Attributes

Attribute Value Description
form form_id 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

The <meter> tag also supports the Global Attributes in HTML.


Event Attributes

The <meter> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Meter Object


Default CSS Settings

None.