HTML5 <meter> Tag
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, relevance 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
Attribute | Description |
---|---|
form | Defines one or more forms to which the <meter> tag belongs. |
max | Specifies the maximum value of a range. |
min | Specifies the minimum value of a range. |
high | Specifies the range considered to be a high value. |
low | Specifies the range value that is considered to be low. |
Optimum | Specifies the optimum value for the range. |
value | Specifies 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 > w3wiki </ 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:
- Google Chrome 6
- Edge 18
- Firefox 16
- Opera 11
- Safari 6
Contact Us