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.
Last Updated :
17 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...