Intermediate LevelHTML & Semantic Web
What is the difference between <meter> and <progress> elements?
❓ Interview Prompt: Compare <meter> (scalar gauge within known range) vs <progress> (task completion progress bar).
1. '<progress>':
Represents the completion progress of a task (e.g. file upload progress bar, installer download status). Has 'value' and 'max' attributes.
2. '<meter>':
Represents a scalar gauge within a known range or fractional value (e.g. disk usage percentage, password strength meter, battery level). Supports 'min', 'max', 'low', 'high', and 'optimum'.
Code Implementation Example
html
<!-- Task completion progress bar -->
<label for="file-upload">File Upload:</label>
<progress id="file-upload" value="70" max="100">70%</progress>
<!-- Disk space gauge meter -->
<label for="disk-usage">Disk Usage:</label>
<meter id="disk-usage" value="0.8" min="0" max="1" low="0.7" high="0.9" optimum="0.5">80%</meter>💡Comparing task completion progress bar vs scalar gauge meter element.
🎯 Interview Key Takeaway
Use <progress> for task completion progress, and <meter> for scalar gauge measurements within a known range.
#progress#meter#Gauges#Semantics#Intermediate
Back to all HTML & Semantic Web Questions→