Summary -
In this topic, we described about the <meter> tag along with detailed example.
The <meter> tag is new in HTML5. A scalar measurement of known range. The <meter> tag represents a scalar measurement within a known range, or a fractional value in the HTML document.
The tag can be specified like <meter value=""></meter>. The value attribute is mandatory for <meter> tag. The <meter> element is used to represent a range.
<meter> element should not be used to represent the progress. <meter> will use to represent the single number if the maximum value is known.
Syntax -
<meter>.. text here.. </meter>
Required Attributes -
| Attribute | Description | Values |
|---|---|---|
| value | Specifies the meter element initial value | Number in between min and max |
Optional Attributes -
| Attribute | Description | Values |
|---|---|---|
| high | Specifies the range that is considered to be high. | Number. Greater than or equal to min, less than or equal to max and greater than or equal to low. |
| low | Specifies the range that is considered to be low | Number. Greater than or equal to min, less than or equal to max and less than or equal to high. |
| max | Specifies the highest value | Number. greater than or equal to min. Default is 1. |
| min | Specifies the lowest value | Number. Less than or equal to MaxMin value is ‘0’ |
| optimum | Specifies the value is optimal value | Number. Greater than or equal to min and less than or equal to max. |
Example -
<!DOCTYPE html>
<html>
<head>
<title>Meter Tag example.. </title>
</head>
<body>
<meter value="7" min="1" max="10">7 out of 10</meter><br>
<meter value="0.7">70%</meter>
</body>
</html>