html tutorial - <progress> Progress Tag in HTML - html5 - html code - html form



  • <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 Code Explanation

  1. <progress> tag used to represent the status of the task.
  2. value is used to set the progress value.
  3. max is used to set the maximum value of the progress.

Output for <progress> tag:

<progress> Tag Output

  1. 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.

Related Searches to progress tag in html