Meter tag in HTML5
In this article I am going to describe about the implementation and use of Meter Tag in HTML5
Meter tag
The HTML <meter> tag is used for indicating a scalar measurement within a known range, or a fractional value. The keyword here is "known range". That means, you are only allowed to use it when you are clearly aware of its minimum value and maximum value. <meter> tag is new in HTML5.
Note The <meter> element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.
One example is score of rating. I would rate this movie <meter min="0" max="10" value="8">8 of 10</meter>.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.
Browser Support
<meter> tag is supported in all major browsers except Internet Explorer and Safari.
Syntax Of Meter Tag
<meter>Show Scalar Measurement Here</meter>
Attributes Value
| Attribute |
Value |
Description |
| form |
form_id |
Specifies one or more forms the <meter> element belongs to |
| high |
number |
This is optional unless you wish to define high value of the range. |
| low |
number |
This is optional unless you wish to define low value of the range. |
| max |
number |
Maximum value of meter element. If unspecified, it will be One (1). |
| min |
number |
Minimum value of meter element. If unspecified, it will be Zero (0). |
| optimum |
number |
This is completely optional. This attribute is for specifying an optimum point of a range. |
| value |
number |
Required. Specifies the current value of the gauge |
Example of <meter> in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Meter tag in HTML5</title>
</head>
<body>
<h2><meter> Tag in HTML5</h2>
<p>Display a gauge:</p>
<ol>
<li><meter min="0" max="100" value="25">25%</meter></li>
<li><meter min="100" max="200" value="150">50%</meter></li>
<li><meter min="0" max="100" value="75">75%</meter></li>
<li><meter min="0" max="800" value="400">50%</meter></li>
</ol>
<p><b>Note:</b> The <meter> tag is not supported in IE and Safari.</p>
</body>
</html>
Output
