<meter> and <progress Tags
The <meter>
and <progress>
elements in HTML5 are used to display the status of a task that is in progress.
The <meter>
tag is used to display a scalar measurement within a known range, or a fractional value, and is typically displayed as a gauge or bar graph. The <meter>
tag has several attributes, including min
, max
, value
, and low
, high
, and optimum
values, which allow you to control the appearance of the gauge.
Here is the example of <meter>
tag:
<label for="balance">Balance</label>
<meter id="balance" value="80" min="0" max="100">80%</meter>
The <progress>
tag, on the other hand, is used to display the progress of a task, such as the completion of a file download or the progress of a multi-step process. The <progress>
tag also has a value
attribute, which indicates the current progress of the task, as well as a max
attribute, which sets the upper limit for the progress.
Here is the example of <progress>
tag:
<label for="file">file upload</label>
<progress id="file" value="88" max="100"> 88% </progress>
Both elements provide a semantic way to represent progress information in HTML documents, making it easier for both users and developers to understand the meaning of the information being displayed.