HTML5 <meter> Tag

The HTML <meter> tag is used to represent either a scalar value within a known range or a fractional value.

The only content permitted inside this element is phrasing content, but there must be no <meter> element among its descendants. Both the starting and ending tag are mandatory for this element. The parent of the <meter> tag can be any element that accepts phrasing content.

Here is an example of using this tag:

<p>Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
   Voter turnout: <meter value=0.75><img alt="75%" src="turnout_graph.png"></meter>
   Tickets sold: <meter min="0" max="100" value="75"></meter></p>

Like the above example, you should include a textual representation of the gauge’s state in the element’s contents. This will be helpful for users whose browsers (like Internet Explorer) do not support the meter element.

<!-- High and Low Range Example -->
<p>The current water level in the dam : 
   <meter low="69" high="80" max="100" value="84">is at a dangerous level of 84</meter></p>

Attributes

value

The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range.
Unless the value attribute is between 0 and 1 (inclusive), the min and max attributes should define the range so that the value attribute’s value is within it.

min

The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0.

max

The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1.

low

The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low value is equal to the minimum value.

high

The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high value is equal to the maximum value.

optimum

This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred.

form

This attribute associates the element with a form element that has ownership of the meter element. For example, a meter might be displaying a range corresponding to an input element of type number. This attribute is only used if the meter element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a form element.

Examples

See the Pen ryMbWE by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <meter> element on MDN.
  2. You can also read the HTML <meter> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top