HTML Meter Tag - CodeRepublics
Advertisement

Advertisement


HTML Meter

HTML <meter> was introduced in HTML 5. It tag is used to define a scalar measurement within a given range. The <meter> element is used to represent a range and it should not be used to represent a single number (such as number of student in a classroom) unless there is a known maximum number.

It can be also used to display disk usage, voting population etc.

Note : The <meter> tag is not supported in Internet Explorer, Edge 12, Safari 5 and earlier versions.

HTML Meter Tag Attributes

Attributes Description
value It is a mandatory attribute which is used to specify a value in numbers. The number may be integer or floating point number.
form It specify the forms to which meter element belongs to.
high It specifies a range that is considered as high value.
low It specifies a range that is considered as low value.
max It specifies the maximum value defined in the range.
min It specifies the minimum value defined in the range.
optimum It specifies the optimum value for the gauge.It is not mandatory to use attribute.

HTML Meter Tag


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Meter Tag </title>
</head>
<body>
<p>Display a gauge:</p>
<meter value="50" min="1" max="100"> 50 out of 100 </meter><br>
<meter value="0.9"> 90% </meter>
</body>
</html>

Output

HTML Meter Tag Examples 50 out of 100
90%

HTML Meter Tag with CSS

In this example, CSS is applied on meter tag. The height and width of the meter tag is specified by CSS, which will override the default value.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Meter Tag </title>
<style>
meter{
width: 400px;
height: 30px;
}
</style>
</head>
<body>
<meter value="0.9"> 90% </meter>
</body>
</html>

Output

HTML Meter Tag Examples 90%

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<meter>
Yes
Yes
Yes
Yes
Yes









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.