In HTML, what is the difference between the <progress> and <meter> elements, and when do you use each?

## Two bars, two meanings The visual similarity is a trap. These elements encode different claims about what the number means. **`<progress>` is about a task.** It says: something is running, and this is how much of it is finished. There is an end state, and the value is expected to travel toward it. ```html <label for="upload">Uploading</label> <progress id="upload" value="32" max="100">32%</progress> ``` `max` defaults to 1, so `value="0.32"` with no `max` means the same thing. Omit `value` entirely and you get the **indeterminate** state — the animated "working, duration unknown" bar. That is the correct markup for "we have started and cannot estimate", and it is a genuinely useful state most hand-built spinners never distinguish from a real percentage. The text inside the element is a fallback for browsers that do not support it; supporting browsers do not display it. It is not a label. **`<meter>` is about a measurement.** It says: here is a value on a known scale, right now. Disk space in use, a review score, the fraction of a quota consumed, a temperature within an operating band. Nothing is completing. ```html <label for="disk">Disk used</label> <meter id="disk" value="0.82" low="0.5" high="0.8" optimum="0.1">82%</meter> ``` Beyond `value`, `min` and `max` (defaulting to 0 and 1), `<meter>` takes three attributes that describe the *shape* of the scale: `low` and `high` mark the boundaries of the middle band, and `optimum` says where the good end is. From these, browsers colour the gauge to indicate whether the current reading is in the preferred, suboptimum or worst band. That is the part people forget exists — the element does not just draw a bar, it can express whether the number is good news. ## Choosing between them Ask whether "is it done yet?" is a sensible question about the value. - Upload, install, multi-step wizard completion, a batch job: **progress**. - Disk usage, password strength, a 4.2-out-of-5 rating, API quota consumed, tickets closed out of an unchanging total that is not a task you are performing: **meter**. The frequent mistake is using `<meter>` for a loading bar because the colour bands look nice, or using `<progress>` for a static gauge because it is the more familiar element. Both mislead assistive technology, which announces them from different roles: a progress element is exposed as a progress indicator, a meter as a gauge. ## Both need a name Neither element names itself, and a bar announced only as "82%" tells a screen-reader user nothing. Both are *labelable*, which means a `<label for>` attaches to them exactly as it does to an input, and `aria-label` is an alternative when no visible text exists. Give every one of them a name. Also note that these are output-only. Neither is a control the user can operate, neither submits anything, and neither is a substitute for `<input type="range">` when you want the user to *choose* a value. ## The third display element: output Alongside these sits `<output>`, which represents the result of a calculation — a computed total, a converted unit, a live sum of the fields above it. Its `for` attribute takes a space-separated list of the ids of the elements that contributed to the result, and its value is simply its text content, which script updates. ```html <output name="total" for="qty price">0.00</output> ``` It is form-associated and it resets with the form, but it is not submitted — it is a derived value, and derived values belong to the server's own arithmetic, not to the request. Its default role is a status role, which is why calculated results placed in an `<output>` tend to be announced when they change, whereas the same number dropped into a `<span>` changes silently.