HTML

HTMLMeterElement

HTMLMeterElement <meter>

In addition to the HTMLElement object interface that they also have access to by inheritance, the HTML <meter> elements expose the HTMLMeterElement interface, which offers unique properties and methods for altering the layout and presentation of <meter> elements.

Note: It's not recommended to utilize the meter tag to show progress. Use the <progress> tag for progress bars.
Tip:To ensure optimum accessibility practices, apply the label tag at all times!

Attribute Value Description Example
form form_id Specifies which form the <meter> element belongs to <form action="/action_page.php" method="get" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> <p><label for="anna">Anna's score:</label> <meter id="anna" form="form1" name="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
high number Specifies a floating point number that is considered to be a high value <p><label for="anna">Anna's score:</label> <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> <p><label for="peter">Peter's score:</label> <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p> <p><label for="linda">Linda's score:</label> <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
low number Specifies a floating point number that is considered to be a low value <p><label for="anna">Anna's score:</label> <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> <p><label for="peter">Peter's score:</label> <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p> <p><label for="linda">Linda's score:</label> <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
max number Specifies a floating point number that is the maximum value of the gauge. Default value is "1" <p><label for="anna">Anna's score:</label> <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> <p><label for="peter">Peter's score:</label> <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p> <p><label for="linda">Linda's score:</label> <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
min number Specifies a floating point number that is the minimum value of the gauge. Default value is 0 <p><label for="anna">Anna's score:</label> <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> <p><label for="peter">Peter's score:</label> <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p> <p><label for="linda">Linda's score:</label> <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
optimum number Specifies a floating point number that is the optimal value of the gauge <p><label for="yinyang">Yin Yang:</label> <meter id="yinyang" value="0.3" high="0.9" low="0.1" optimum="0.5"></meter></p>
value number Required. Specifies a floating point number that is the current value of the gauge. <p><label for="anna">Anna's score:</label> <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> <p><label for="peter">Peter's score:</label> <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p> <p><label for="linda">Linda's score:</label> <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>

Browser Compatibility

Element Chrome Edge Firefox Safari Opera
<meter> Yes Yes Yes Yes Yes