html tutorial - <progress> Progress Tag in HTML - html5 - html code - html form
Learn html - html tutorial - progress tag - html examples - html programs
- <progress> tag is used to show the completion progress of the task.
- We can use to manipulate the value of progress bar by JavaScript.
- <progress> tag belongs to Flow content, phrasing content, labelable content and palpable content.
- <progress> tag supports Global Attributes and Event Attributes.
Syntax for <progress> tag:
<progress value=”value of progress” max=”maximum value of progress”>Sample Coding for <progress> tag:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy progress tag</title>
</head>
<body>
Progress Status:
<progress value=”22” max=”100”>
</progress>
</body>
</html>Code Explanation for <progress> tag:
- <progress> tag used to represent the status of the task.
- value is used to set the progress value.
- max is used to set the maximum value of the progress.
Output for <progress> tag:
- The output shows the progress of the task.
Attributes of <progress> tag:
| Attribute | Value | HTML4 | HTML5 | Description |
|---|---|---|---|---|
| max | number | Yes | Yes | To specify the total value of the task. |
| value | number | Yes | Yes | To specify the completed value of the task. |
Browser Support for <progress> tag in HTML:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 8.0 | 10.0 | 16.0 | 6.0 | 11.0 |
Tips and Notes
- The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.