HTML <meter> Tag
Description
The <meter> HTML tag is used to represent a scalar measurement within a known range or a fractional value. It is typically employed to display gauges, progress bars, or other visual representations of data with a clear minimum and maximum value. The <meter> tag includes attributes like value to specify the current measurement, min to set the minimum acceptable value, and max to set the maximum acceptable value. This tag is particularly useful for conveying information about the status or progress of a task, such as file uploads, completion of a survey, or battery levels in a graphical manner on web pages.
Properties
- Permitted Parents
- Any element that accepts phrasing content
- Content
- Inline and text, but no <meter> among its descendants
- Start/End Tags
- Start tag: required, End tag: required
Example
<p>Average Review: <meter value="3" min="0" max="10">3 out of 10</meter> 3/10</p>
<p>Site Completion: <meter value="0.7">70%</meter> 70%</p>Attributes
| Attribute | Definition |
|---|---|
| form | Specifies one or more forms the [meter] element belongs to |
| high | Specifies the range that is considered to be a high value |
| low | Specifies the range that is considered to be a low value |
| max | Specifies the maximum value of the range |
| min | Specifies the minimum value of the range |
| optimum | Specifies what value is the optimal value for the gauge |
| value | Required. Specifies the current value of the gauge |
Global Attributes
The <meter> tag also supports the Global Attributes in HTML5
Event Attributes
The <meter> tag also supports the Event Attributes in HTML5
Browser Support
The following table will show you the current browser support for the HTML <meter> tag.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 18 | 6 | 16 | 11 | 6 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 16 | 11 | 10.1 | 3 | x |
Last updated by CSSPortal on: 30th September 2023