Tag Progress

## HTML5 `` Tag The HTML `` element represents the completion progress of a task. It is typically displayed as a progress bar and is ideal for visualizing tasks with a known duration or completion state, such as file downloads, file uploads, or form submission steps. --- ## Quick Example Here is a simple example showing a progress bar at 22% completion: ```html Downloading file: 22% ``` --- ## Browser Support The `` tag is widely supported across all modern web browsers: * **Google Chrome**: Supported (Version 8.0+) * **Mozilla Firefox**: Supported (Version 16.0+) * **Internet Explorer / Edge**: Supported in IE 10+ and all versions of Edge * **Safari**: Supported (Version 6.0+) * **Opera**: Supported (Version 11.0+) *Note: Internet Explorer 9 and earlier versions do not support the `` tag.* --- ## Definition and Usage * The `` element is used to visualize the progress of an ongoing task. * It is a **new element introduced in HTML5**. * It should **not** be used to represent static gauge measurements (e.g., disk space usage, fuel level, or voting results). For static measurements within a known range, use the [``](tag-meter.html) tag instead. --- ## Attributes The `` element supports two specific attributes in addition to the standard HTML global attributes and event attributes: | Attribute | Value | Description | | :--- | :--- | :--- | | `max` | *number* | Specifies how much work the task requires in total. The default value is `1.0`. | | `value` | *number* | Specifies how much of the task has been completed. It must be between `0` and the value of the `max` attribute. | ### Indeterminate State If you omit the `value` attribute, the progress bar enters an **indeterminate** state. This is useful when you know a task is running, but you cannot determine how long it will take (e.g., waiting for a server response). ```html ``` --- ## Practical Examples ### 1. Basic Progress Bar A standard progress bar with a maximum value of 100. ```html

Task Progress:

70% ``` ### 2. Dynamic Progress Bar with JavaScript To make the progress bar functional, you can update its `value` dynamically using JavaScript. ```html

Uploading File...

0% ``` --- ## Best Practices and Accessibility 1. **Provide Fallback Content**: Always include text inside the `` tags (e.g., `50%`). This text acts as a fallback and will be displayed in older browsers that do not support the element. 2. **Use Labels**: For accessibility, pair your `` element with a `` element or use the `aria-label` attribute so screen readers can describe the progress bar to users. 3. **Styling**: You can style the progress bar using CSS, but keep in mind that different browsers render the progress bar using their own native operating system styles. To customize it consistently, you may need to use vendor-specific pseudo-elements like `::-webkit-progress-bar` and `::-moz-progress-bar`.

YouTip

Tag Progress

📂 Categories