Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 20 Jan, 2022

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 <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 to be done for completing a task.
  • value: It represents the amount of work is already completed.

Example:

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, relevance query result, etc. 

Example:

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 HTML <meter> tag: The <progress> tag is used to represent the progress of a task whereas the <meter> tag is used to represents the scalar measurements in a given range.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!