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.
<!DOCTYPE html> < html >
< body >
< h1 >
GeeksforGeeks
</ 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