Which tag is used to represent progress of a task in HTML & how is it different from <meter> tag ?
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.
Please Login to comment...