HTML <meter> Tag

The <meter> is a new element in HTML5. The tag defines a scalar measurement in the known range or graphic representation of a fractional number. The tag can be used, when it is necessary to display, for example, the level of battery charge, disk usage, etc. To use the <meter> tag, you need to know the maximum value.

The <meter> tag isn’t used to indicate progress. For that purpose, use the <progress> tag.

Syntax

The <meter> tag comes in pairs, which means that the closing tag is required.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 из 10</meter> 4 Out of 10<br>
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Result

Use CSS background-color, box-shadow, width and height properties to style the <progress> element.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 220px;
        height: 20px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #eee;
        box-shadow: 0 0 3px #666 inset;
      }
      progress[value]::-webkit-progress-value {
        background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
        -webkit-linear-gradient(top, #96f204, #8ebf42),
        -webkit-linear-gradient(right, #96f204, #8ebf42);
        background-size: 40px 20px,  10%;
      }
    </style>
  </head>
  <body>
    <p>Downloading:
      <progress value="35" max="100"></progress>
      <span>35%</span>
    </p>
    <p>Progress bar:
      <progress value="80" max="100"></progress>
      <span>80%</span>
    </p>
  </body>
</html>

Result

Attributes

Attribute Value Description
form form_id Indicates form (forms), which the <meter> tag belongs to.
high number Indicates high values (but not maximum ones). If the high value is less than the low, then the high = low. If high is set larger than max, then high = max.
low number Defines law values (but not minimal ones). This value must be less then high. If the low value is less than the min, then low = min.
max number Defines the maximum possible value. The default value is 1.
min number Defines the minimum possible value. The default value is 0.
optimum number Defines the optimal number, which must be within the range defined by the min and max attributes.
It may be larger than the high value.
Color depends on the location of the optimum:
red: min ≤ optimum < low
yellow: low ≤ optimum ≤ high
green: high < optimum ≤ max
value number Sets the current, which must be within the range, defined by the min and max attributes.
Required attribute.

The <meter> tag supports the Global Attributes and the Event Attributes.

Browser support

8+ 6+ 6+ 11+