HTML5
What are <progress> and <meter> Tags in HTML5?
HTML5 added two similar-looking but distinct elements: <progress> and <meter>. Both display a horizontal bar, but they represent different things. Knowing when to use each is a common interview topic.
The <progress> Tag
The <progress> element represents the completion progress of a task — for example, a file upload or download. It has a value attribute (how much is done) and a max attribute (the total). If value is omitted, the bar shows an indeterminate 'in progress' state.
<label for="upload">Upload progress:</label>
<progress id="upload" value="70" max="100">70%</progress>
<!-- Indeterminate (task running, amount unknown) -->
<progress></progress>The <meter> Tag
The <meter> element represents a scalar measurement within a known range — a gauge. Examples include disk usage, a test score, or temperature. It supports min, max, value, and the optional low, high, and optimum attributes, which let the browser color the gauge (e.g., red for a low/critical region).
<label for="disk">Disk used:</label>
<meter id="disk" min="0" max="100" low="30" high="80"
optimum="20" value="90">90 GB of 100 GB</meter>Key Difference
| Aspect | <progress> | <meter> |
|---|---|---|
| Represents | Completion of a task | A scalar value within a range (gauge) |
| Typical use | Upload/download/loading | Disk usage, scores, ratings, temperature |
| Has a 'range' concept | No (only value/max) | Yes (min, max, low, high, optimum) |
| Indeterminate state | Yes (omit value) | No |
Remember: use <progress> when something is being completed over time, and <meter> for a fixed measurement within a known scale.