Open In App

Which tag is used to represent progress of a task in HTML & how is it different from <meter> tag ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see which tag is used to represent the progress of a task in HTML. To represent the progress of a task, we will use the <progress> tag. This tag is used to represent the progress of a task. It is also defined how much work is done and how much is left.

Syntax:

<progress attributes...> </progress>

Attributes: This tag consists of two attributes that are listed below:

  • max: It represents the total work that is to be done for completing a task.
  • value: It represents the amount of work that is already completed.

Example: In this example, we will use the <progress> tag.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Progress tag to represent
        the progress of a task
    </title>
</head>
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>
            Progress tag to represent
            the progress of a task
        </h3>
        <span>GeeksforGeeks Work Progress:</span>
 
        <progress value="57" max="100"></progress>
    </center>
</body>
</html>


Output:

Progress Tag

HTML <meter> Tag: The <meter> tag is used to define the scale for measurement in a well-defined range and also supports a fractional value. It is also known as a gauge. It is used in Disk use, relevant query result, etc. 

Example: In this example, we will use the <meter> tag.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Meter tag to measure data within
        a specified range
    </title>
    <style>
        #met {
            width: 300px;
            margin: 0 auto;
        }
        meter {
            width: 150px;
        }
    </style>
</head>
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
        <h3>
            Meter tag to measure data within
            a specified range
        </h3>
    </center>
 
    <div id="met">
        <span>GeeksforGeeks:</span>
 
        <meter value="55" min="0" max="100">
            55
        </meter>
    </div>
</body>
</html>


Output:

MeterTag

HTML <progress> tag is different from the HTML <meter> tag: The <progress> tag is used to represent the progress of a task whereas the <meter> tag is used to represent the scalar measurements in a given range.



Last Updated : 17 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads