Forms & Inputs

HTML <meter> Tag

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

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.

Standard Syntax:<meter>...</meter>

Interactive ExampleRunnable

HTML <meter> Example

html
Try it Yourself
Live code demonstration for the <meter> tag. Click "Try it Yourself" to edit and experiment in real time.
<div style="font-family: system-ui, sans-serif; padding: 16px; background: #ffffff; border-radius: 8px; border: 1px solid #e2e8f0; color: #0f172a;">
<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>
</div>

Attributes for <meter>

6 Supported Attributes
AttributeValuesDefaultDescription
formform_idnoneSpecifies which form the <meter> element belongs to
highnumbernoneSpecifies the range that is considered to be a high value
lownumbernoneSpecifies the range that is considered to be a low value
maxnumbernoneSpecifies the maximum value of the range
minnumbernoneSpecifies the minimum value of the range. Default value is 0
optimumnumbernoneSpecifies what value is the optimal value for the gauge
Global Attributes

The <meter> tag also supports the standard global attributes in HTML, including class, id, style, title, hidden, and data-*.

HTML Global Attributes Reference →
Event Attributes

The <meter> tag supports event attributes in HTML, such as onclick, onmouseover, onfocus, and more.

HTML Event Attributes Reference →

Browser Compatibility

ChromeEdgeFirefoxSafariOpera

More Tags in Forms & Inputs

View All 123Tags →