Français

<meter>

Display a value within a known range: score, gauge, quota

— 1 min read

  • HTML
  • accessibility
  • semantics
  • interactions

<meter> — The gauge

The <meter> element represents a scalar measurement within a known range. The min, max, low, high and optimum attributes define the thresholds. It is not a progress bar — it represents a state at a given point in time.

When to use it

You want to display an evaluation score, a battery level, a disk space quota, a rating out of 10, or any measurable value with a known minimum and maximum.

What you gain

Accessibility: screen readers announce the value and its thresholds. The browser colors the gauge green, yellow or red depending on where the value sits relative to optimum.

Code example

<label for="disk">Disk usage:</label>
<meter id="disk" min="0" max="100" low="60" high="85" optimum="30" value="72">
  72 GB used out of 100 GB
</meter>
 
<label for="score">Accessibility score:</label>
<meter id="score" min="0" max="10" low="4" high="7" optimum="10" value="9">
  9 out of 10
</meter>

Further reading