Skip to main content

HTML <progress> Tag

The <progress> tag is a specific element that is used to indicate how far a user has progressed through a task on a website. This can be useful for tracking progress in quizzes, data entry forms, and other tasks.

Using the <progress> element is fairly simple. It's an empty HTML tag that must contain two attributes: max and value.

  • The max attribute indicates the maximum progress value and should be set to a valid floating point number such as 100.
  • The value attribute indicates the current progress position within the task and should also be set to an a valid floating point number.

Here are some examples:

40% 12% 99 
<progress max="100" value="40">40%</progress>
<progress max="50.50" value="12">12%</progress>
<progress value="32">32</progress>

As you can see, by using <progress>, developers can easily create visually appealing progress bars without the need for complex JavaScript or CSS code.

The benefits of using the <progress> tag are numerous. It allows developers to create visually clear representations of tasks completed quickly and easily; it also provides accessibility features such as screen readers which can help disabled users understand task progress more clearly; it is supported by all major browsers, so there is no need for complex browser-specific coding practices.