> While <progress> is fairly self-explanatory – it shows how far along something is, such as your progress through a form
My understanding is that this is incorrect.
<progress> is for a progress bar, such as downloading a file, or a loading screen.
<meter> is for showing a value in linear space.
The progress through a form is a value in linear space, not a task that the user is waiting for. Their progress can go forward and back. The user is in control of the value. Therefore <meter> is the correct element.
Is the element there to keep the user amused while they are waiting for something? Could it conceivably be styled so as to include a waiting animation? Does it only ever move forwards and never backwards? If yes, then it's a <progress>, if no then it's a <meter>.
Downloading a file or a loading screen is also a value in linear space.
The only difference, in my mind, is that:
• Progress is expected to go upwards as the underlying task is completed. It can, however, stall on a value or it can reset back to zero if the task fails and is restarted. But in the normal, common case, the trend is upwards towards completion.
• Meters reflect the current value of some metric and so can go up and down as the underlying value changes through time, e.g. room temperature, or disk space used of a disk space quota.
You could use a meter to indicates progress. As such, I think progress is a specialised meter, where we don't care so much about the underlying value, just that we're working steadily towards the goal.
Here's one counter example: Progress indicators can be indeterminate, when the duration of the task is unknown but you still want to communicate to the user that something is happening.
You can make an indeterminate <progress> by not specifying a value attribute, and then styling it with the :indeterminate pseudoclass (TIL).
It's well worth it to read the Apple Human Interface Guidelines, even if you don't develop for Apple platforms, they have some good universal UI advice:
Progress can go backwards too. Part of a file transfer might be determined to be corrupt, or it might refer to my career progress which frequently goes backwards.
My understanding is that this is incorrect.
<progress> is for a progress bar, such as downloading a file, or a loading screen.
<meter> is for showing a value in linear space.
The progress through a form is a value in linear space, not a task that the user is waiting for. Their progress can go forward and back. The user is in control of the value. Therefore <meter> is the correct element.
Is the element there to keep the user amused while they are waiting for something? Could it conceivably be styled so as to include a waiting animation? Does it only ever move forwards and never backwards? If yes, then it's a <progress>, if no then it's a <meter>.