juniorHTML5
Explain the <progress> and <meter> elements.
Updated Apr 28, 2026
Short answer
<progress> is for task completion; <meter> is for a scalar measurement within a known range.
Deep explanation
<progress> shows how much of a process is finished (like a file upload). <meter> represents a gauge (like disk space usage or test scores).
Real-world example
A password strength indicator would use <meter>, while a checkout multi-step indicator would use <progress>.
Common mistakes
- Using <progress> for a measurement that isn't a 'task' (e.g., storage space).
Follow-up questions
- Can <progress> be indeterminate?