HTML5

What are <progress> and <meter> Tags in HTML5?

HTML5 added two visual indicator tags that are often confused: <progress> and <meter>. Both draw a bar, but they mean different things. <progress> represents how far along a task is (like a file upload). <meter> represents a scalar measurement within a known range (like disk usage or a score).

Direct Answer: The Difference

Feature	<progress>	<meter>
Represents	Completion of a task	A measurement in a range
Example	File upload, page loading	Disk usage, exam score, temperature
Key attributes	value, max	value, min, max, low, high, optimum
Colour changes	No	Yes — green/yellow/red based on range
Can be indeterminate	Yes (omit value)	No

Runnable <progress> Example

A determinate and an indeterminate progress bar

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Progress Demo</title>
</head>
<body>
  <h2>Task Progress</h2>

  <p>Download: 70% complete</p>
  <progress value="70" max="100">70%</progress>

  <p>Loading (indeterminate — no value):</p>
  <progress></progress>
</body>
</html>

Runnable <meter> Example

Meters with low/high/optimum colour zones

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Meter Demo</title>
</head>
<body>
  <h2>Measurements</h2>

  <p>Disk usage:</p>
  <meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="0.2">80%</meter>

  <p>Exam score:</p>
  <meter value="82" min="0" max="100" low="35" high="70" optimum="100">82 out of 100</meter>
</body>
</html>

💡

Rule of thumb: if the value moves toward completion over time, use <progress>. If it is a static reading within a scale, use <meter>. A meter's colour reflects whether the value is in the good, average, or poor zone.

Key Takeaways

<progress> shows how much of a task is done (value + max).
<meter> shows a scalar value within a known range with colour zones.
Omitting value on <progress> makes it indeterminate (busy).
Do not use <meter> for progress or <progress> for gauges.