New in HTML5.

<progress> HTML Tag

Sharing is caring!

Element of
What Is Semantic Markup And What Has It Got To Do With HTML5?
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