HTML <Meter> Tag

Definition

The <meter> tag represents a scalar measurement within a specific range or a fractional value. When using it, a gauge or progress bar will be displayed by the browser.

Example

Tank level: <meter value="6" max="40" title="litres">6 litres</meter><br />
Voter turnout:
<meter value="0.75">
  <img
    alt="75%"
    src="https://res.cloudinary.com/thewebmaster/image/upload/v1618572252/image/75-progress.jpg"
  />
</meter>

Tank level: 6 litres
Voter turnout:

Usage

• Both the opening tag and the closing tag are required.
• The value attribute must be specified.
• A textual representation of the progress bar should be made in the contents of the element. This could include a text description of the measurement or a replacement image (along with an <alt> tag).
• It is good practice to include the unit of measurement in the title attribute.
• The <meter> element should be used to indicate progress, such as a progress bar. You should use the <progress> element instead.
• The <meter> element does not present a scalar value of an arbitrary unknown range. For example, you should not use it to report a person’s weight or height because the maximum value is unknown.

Attributes

The <meter> element supports the Global Attributes, as well as the following:

• value

  The value attribute specifies the current numeric value. This should be between the min and max values. If the value is unspecified, the value equals zero. If outside of the range, it will take the value equal to the range’s nearest end. This must be a valid floating-point number.

• min

  The min attribute specifies the lower edge of the range. This must be lower than the max value. This must be a valid floating-point number.

• max

  The max attribute specifies the higher edge of the range. This must be higher than the min value. This must be a valid floating-point number.

• low

  The low attribute specifies a low level under which the value is considered to be too low. When used with the optimum attribute, it is the optimum value that determines whether this is good or bad. See optimum below. This must be a valid floating-point number.

  Progress: 
  <meter
    min="0" max="100"
    low="25" high="75"
    value="25">
  at 25/100
  </meter>

  Progress: at 25/100

• high

  The high attribute specifies a level over which the value is considered to be too high. When used with the optimum attribute, it is the optimum value that determines whether this is good or bad. See optimum below.

  Progress: 
  <meter
    min="0" max="100"
    low="25" high="75"
    value="80">
  at 80/100
  </meter>

  Progress: at 80/100

• optimum

  The optimum attribute specifies the optimum or good value of the progress bar. When used with the low and high attributes, the browser will change the status depending on its value. This also provides the opportunity to have three status colors. This must be a valid floating-point number.

  Progress: 
  <meter
    min="0" max="100"
    optimum="10"
    value="20">
  at 80/100
  </meter><br>
  Progress: 
  <meter
    min="0" max="100"
    low="25" high="75"
    optimum="10"
    value="50">
  at 80/100
  </meter><br>
  Progress: 
  <meter
    min="0" max="100"
    low="25" high="75"
    optimum="10"
    value="80">
  at 80/100
  </meter>

  Progress: at 80/100
  Progress: at 80/100
  Progress: at 80/100

• form

  The form attribute allows you to associate the <meter> element with a form by specifying the <form> id attribute. This is not required if it is located within a <form> element.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile