Web development

HTML meter tag

Learn how to use the HTML meter tag.

HTML meter tag

HTML <meter> tag

The HTML <meter> tag specifies a scalar measurement within a known range or a fractional value.

The HTML <meter> tag is used to display a gauge like a disk usage, the relevance of a query result, etc.


<!DOCTYPE html>

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

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



8 out of 10


form (value- form_id) – defines which form the <meter> element belongs to.

high (value- number) – defines the range that is considered to be a high value.

low (value- number) – defines the range that is considered to be a low value.

max (value- number) – defines the maximum value of the range.

min (value- number) – defines the minimum value of the range.

optimum (value- number) – defines what value is the optimal value for the gauge.

value (value- number) – defines the current value of the gauge.

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

Enjoy coding!

Read also:

HTML link tag

HTML time tag

HTML label tag