HTML / HTML Tags

HTML <Meter> Tag

Oct 12, 2022
3 min read
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: 75%

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesNoYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
NoYesYesYesYesYes