Open In App

HTML5 <meter> Tag

Last Updated : 26 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

The HTML <meter> form Attribute defines the scale for measurement in a well-defined range and supports a fractional value. It is also known as a gauge. It is used in Disk use, relevant query results, etc. 

Avoid using the <meter> tag to denote progress, such as in a progress bar. Instead, utilize the <progress> tag specifically for progress bars. It allows you to specify a range, optimum, minimum, and maximum values for the meter. 

Note: It's highly recommended to incorporate the <label> tag for optimal accessibility practices!

Syntax: 

<meter attributes...> </meter>

Attributes

AttributeDescription
formDefines one or more forms to which the <meter> tag belongs.
maxSpecifies the maximum value of a range.
minSpecifies the minimum value of a range.
highSpecifies the range considered to be a high value.
lowSpecifies the range value that is considered to be low.
OptimumSpecifies the optimum value for the range.
valueSpecifies the required or actual value of the range.

Example: In this example, we will see the implementation of the meter tag with an example.

html
<!DOCTYPE html>
<html>

<body>
    <h1>
        GeeksforGeeks
    </h1>
    <p>
        Meter Tag:
    </p>
    Sachin's score:
    <meter value="5" min="0" max="10">
        5 out of 10
    </meter>
    <br>
    Laxma sxore:
    <meter value="0.5">
        50% from 100%
    </meter>
</body>

</html>

Output: 

Supported Browsers: 


Similar Reads