Correct markup - <meter> vs <progress>

by TvK

What's the difference between <meter> and <progress> and when to use them?

Meter

indicates value in given range. Do not use this for progress indication.
You can set min, max, current value; low, optimum, and high.

Examples are:

  • distance (e.g. from your city to other cities),
  • height of person,
  • grades at school,
  • wind strength,
  • precipitation,
  • temperature,
  • similarity when comparing 2 things.

Progress

Indicates completion of a task or process.
Minimum value is 0. Maximum should be given (1 assumed if max attribute isn't present).

Examples are:

  • steps in cart,
  • file upload,
  • multi-step form completion,
  • milestone completion (e.g. on Github),
  • loading of application.

Uncertainity

If you have a CV, which indicates the level of your skills - which would you choose?

Let's take language level (A1-C2) as an example.

Meter makes sense, because it indicates value from range. If your knowledge of a language is B1, we can express it as something between 33-50%.
The nice thing about meter is also low / high / optimum parameters. So you can set B1 to "optimum" (considering Cx being "high").

Progress might make sense, because you can still be improving yourself. Language levels can be nice 6 steps in progress.
But user visiting your site will probably not see any progress during her/his visit :)
I think progress is generally better if your visitor can see changes in the process. Well, except milestone completion.

I would personally go with meter.

Styling

For styling please refer to some other resource. I find these two to be nice:

Tags:
#html #semantics #meter #progress