HTML meter Tag
Web structure starts with solid HTML. Learn how HTML meter Tag contributes to accessible and semantic web pages in the tutorial below.
HTML <meter> element is employed to quantify data within a specified range. This tag specifies a scalar measurement with a defined range. It is also referred to as a gause.
It is commonly utilized to showcase disk usage, electorate size, and similar data sets.
The HTML meter element is a recent addition in HTML5, hence requiring modern web browsers for proper functionality.
Attributes of HTML Meter Tag
HTML <meter> element enables the usage of both global and event attributes, in addition to certain unique 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 specifies one or more 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 an optional attribute. |
HTML Meter Tag Example
Let's examine an example showcasing the implementation of the min, max, and value attributes.
<p>Display a gauge:</p>
<meter value="30" min="1" max="100">30 out of 100</meter><br>
<meter value="0.8">80%</meter>
Output:
Display a gauge:
Styling Meter
You can apply CSS code on meter tag.
meter{
width: 300px;
height: 30px;
}
Output:
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<meter> |
Yes | Yes | Yes | Yes | Yes |
