The Difference Between HTML meter and progress

<meter> and <progress> can both appear as a filled horizontal bar. Their meaning is different, and the visual similarity does not make them interchangeable.

Use <meter> for a measurement within a known range. Use <progress> for a task moving towards completion.

A meter describes the current value

<label for="storage">Storage used</label>
<meter id="storage" min="0" max="100" value="68">
  68%
</meter>

The storage is not 68% finished. Its current measurement is 68 within a range from 0 to 100.

Disk use, battery level, signal strength, a score, and a rating can all fit this model. The range needs a meaningful lower and upper bound.

Progress describes unfinished work

An upload at 60% uses <progress>:

<label for="upload">File upload</label>
<progress id="upload" max="100" value="60">
  60%
</progress>

If the amount completed is unknown, omit value to create an indeterminate progress indicator. A meter does not have that concept because it describes a value, not waiting for a task.

A meter can describe useful regions

low, high, and optimum add context to the range:

<meter
  min="0"
  max="100"
  low="60"
  high="85"
  optimum="20"
  value="72">
  72% used
</meter>

For disk usage, a low value is desirable, so the optimum sits below the thresholds. For a test score, the relationship could run the other way:

<meter
  min="0"
  max="100"
  low="40"
  high="75"
  optimum="100"
  value="82">
  82%
</meter>

Browsers can use those values when choosing the meter’s appearance. Do not rely on colour alone to explain whether 72 is good or bad.

Keep the number and label readable

The text inside the element is fallback content, not always the visible label next to the rendered control. Associate a <label> where possible and include the useful number in surrounding text if the design needs it.

Native styling differs between browsers. You can reach for engine-specific pseudo-elements, but I would leave most of the control alone unless the project has a strong reason. Rebuilding a familiar meter from <div> elements adds work quickly: semantics, ranges, colours, and accessible values all need attention.

When the meaning fits, <meter> is the short answer. When it does not, a bar-shaped design does not make it fit.

← Back to all articles