Home »
HTML »
HTML Meter Tag
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
Example
Try this code »
<!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>
<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 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.
Example
Try this code »
<!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>
<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
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<meter> |
Recommended :