HTML - <meter> Tag

Quiz

Introduction to <meter> Tag

The HTML <meter> tag is used to represent a scalar measurement within a known range or a frictional value, for tasks like displaying the progress, scores.

It is useful for representing data like disk usage, skill level where the value is defined within a fixed range. It provides a way to visually display the numeric values to teh users in an understandable format.

Syntax

Following is the syntax of HTML <meter> tag −

   <meter>.....</meter>

Attributes

HTML meter tag supports Global and Event attributes of HTML. Some specific attributes as well which are listed bellow.

HTML meter Tag Attributes

Attribute	Value	Description
value	number	Hold a number that defines the current value of the meter or gauge.
form	form_id	Hold a form_id that specifies which form the <meter> element belongs to.
high	number	Hold a number that defines the high value of the metter.
low	number	Hold a number that defines the low value of the meter.
max	number	This is used to se the maximum value of the meter.
min	number	This is used to set the minimum value off the meter.
Optimum	number	Used to set the optimum value of the meter or gauge.

Example : Basic Meter

Let's look at the following example, where we are going to consider the basic usage of the <meter> tag.

<!DOCTYPE html>
<html>
    <style>
        body{
            color:#8e44ad ;
            font-family:verdana;
            text-align:center;
        }
    </style>
<body>
<label for="x">Fuel Level :</label>
<meter id="x" value="0.5" min="0" max="1">88%</meter>
</body>
</html>

Example : Meter with Multiple Ranges

Consider the following example, where we are going to use the <meter> tag to display the temperature with different range thresholds.

<!DOCTYPE html>
<html>
    <style>
        body{
            color:#8e44ad ;
            font-family:verdana;
            text-align:center;
        }
    </style>
<body>
<label for="temperature">Temperature:</label>
<meter id="temperature" value="40" min="0" max="99" low="30" high="70" optimum="50"></meter>
</body>
</html>

Supported Browsers

Tag
meter	Yes 8.0	Yes 13.0	Yes 16.0	Yes 6.0	Yes 11.5

html_tags_reference.htm

Print Page