New in HTML5.

<progress> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
What On Earth Is Semantic Markup? (And Why Should You Learn To Write It)
What does <progress> HTML Tag do?
The <progress> element is used to create a progress bar to serve as a visual demonstration of progress towards the completion of task or goal. The max and value attributes are used to define how much progress (value) has been made towards task completion (max).

Code Example

<progress value="33" max="100"></progress>

Showing Progress

<progress> is a new semantic element in HTML 5. Use it to display a progress bar when a file is being uploaded, or your progress towards a fundraising goal.

Is Your Progress ‘Task-Related’?

The HTML 5 specification says we should use <progress> when displaying the completion of a specific task.

If you need to show a result for something that is not related to a task, you should use <meter>.

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for and runs a content agency, Red Robot Media.

Browser Support for progress