html
/

HTML Progress & Meter: Displaying Progress and Measurements

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Progress & Meter: Displaying Progress and Measurements

What are Progress and Meter?

The <progress> and <meter> elements are used to visually represent values. Progress shows task completion, while meter shows a value within a known range.

Progress Element

The <progress> tag represents the completion progress of a task.

HTMLRead-only
1
<progress value="70" max="100"></progress>

Progress Example with Label

HTMLRead-only
1
<label>Loading:</label>
<progress value="40" max="100"></progress>

Meter Element

The <meter> tag represents a scalar value within a known range, such as battery level or score.

HTMLRead-only
1
<meter value="0.6">60%</meter>

Meter with Range

HTMLRead-only
1
<meter min="0" max="100" value="70"></meter>

Meter with Low, High, Optimum

HTMLRead-only
1
<meter min="0" max="100" low="30" high="80" optimum="90" value="75"></meter>

Key Differences

FeatureProgressMeter
PurposeTask progressMeasurement value
Range0 to maxCustom range
ExampleLoading barBattery level
Attributesvalue, maxmin, max, low, high

Styling with CSS

CSSRead-only
1
progress {
  width: 200px;
  height: 20px;
}

meter {
  width: 200px;
}

Best Practices

  • Use progress for task completion
  • Use meter for known range values
  • Always define max or range attributes
  • Provide labels for clarity
  • Enhance accessibility with text descriptions

Common Mistakes

  • Using meter for progress tasks
  • Missing max or range values
  • Not providing fallback text
  • Ignoring accessibility considerations

Conclusion

HTML progress and meter elements provide simple ways to visualize data. Using them correctly improves UI clarity and user experience.

Try it yourself

<progress value="50" max="100"></progress>
<meter value="70" min="0" max="100"></meter>

Test Your Knowledge

Q1
of 3

Which tag shows task progress?

A
<meter>
B
<progress>
C
<bar>
D
<range>
Q2
of 3

Which tag shows measurement?

A
<progress>
B
<meter>
C
<input>
D
<value>
Q3
of 3

Which attribute defines max value?

A
value
B
max
C
range
D
limit

Frequently Asked Questions

What is the difference between progress and meter?

Progress shows task completion, while meter shows a value within a range.

Can I style progress bars?

Yes, using CSS (browser support varies).

Is meter used for loading?

No, it is used for measurements like scores or battery levels.

Previous

html datalist

Next

html details summary

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.