What is the difference between Meter and Progress in HTML5?

Question

What is the difference of these two html tags, only the appearance(layout,color) is different?

<meter min="0" max="100" value="22"></meter>

<progress value="22" max="100"> </progress>

What is the difference of meter and progress ? Parenting they have the same purpose and goal?

Answer 1

Although they are similar visually they have different purposes, let’s see:

<progress>: represents the progress of performing a task, example: uploading a file.

<meter> is a measure, for example disk use, relevance of the outcome of a consultation, or the fraction of a population that voted for a particular candidate.

Sources: 1, 2

Answer 2

According to this answer in the Soen there is not much difference between using one or the other. Basically the tag <progress> is used to display the progress of a specific task(eg: inform the user about the progress of your order or task, data import, etc), while the tag <meter> has good use for example in displaying the disk usage or the relevance of the result of a query.

Behold this graph where it shows the difference between them.