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:
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:
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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
17 May, 2023
Like Article
Save Article