The Speed Coding

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>

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

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.