HTML5 <meter> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <meter> element represents a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Inline |
|---|---|
| Content: | Inline and text, but no <meter> among its descendants |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <meter> tag is given with:
HTML / XHTML: <meter value="5"> ... </meter>
The example below shows the <meter> tag in action.
Example
Try this code »<p>Disk Usage: <meter value="0.8">80%</meter></p>
<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter></p>
<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>Tag-Specific Attributes
The following table shows the attributes that are specific to the <meter> tag.
| Attribute | Value | Description |
|---|---|---|
| Required — The following attribute must be specified on this tag for the markup to be valid. | ||
value |
number | Specifies the current value of the meter or gauge. This must be between the minimum and maximum values. |
| Optional — The following attributes are optional. | ||
form |
form-id | Associates the <meter> element with a <form> element. |
high |
number | Specifies the range that is considered to be a high value. |
low |
number | Specifies the range that is considered to be a low value. |
max |
number | Specifies the maximum value of the range. |
min |
number | Specifies the minimum value of the range. |
optimum |
number | Indicates what value is the optimal value for the gauge. |
Global Attributes
Like all other HTML tags, the <meter> tag supports the global attributes in HTML5.
Event Attributes
The <meter> tag also supports the event attributes in HTML5.
Browser Compatibility
The <meter> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Forms.
Related tags: <progress>.
