Progress and Meter
The <progress> element represents completion progress, while <meter> represents a scalar measurement within a known range. These elements communicate different semantics and should not be used interchangeably.
Progress and Meter
<label for="course-progress">Course progress</label>\n<progress id="course-progress" value="70" max="100">70%</progress>\n\n<label for="disk">Disk usage</label>\n<meter id="disk" min="0" max="100" value="80">80%</meter>💡 Progress represents completion of a task, while meter represents a measurement within a defined range.
Key Takeaways
- Use progress for task completion.
- Use meter for scalar measurements.
Knowledge Check
Which element represents completion progress?