HTML Tutorial

HTML Tag: <progress>

Usage:

The <progress> tag represents the progress of a task or operation.

Attributes:

  • max: The maximum value of the progress.
  • value: The current value of the progress.
  • label: A label for the progress element.

Examples:

<!-- Default progress bar -->
<progress></progress>

<!-- Progress bar with a label -->
<progress value="50" label="Loading"></progress>

<!-- Progress bar with a maximum value -->
<progress max="100" value="50"></progress>

Simple HTML Example:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the &lt;progress&gt; Tag</title>
</head>
<body>
  <h1>Progress Bar Example</h1>
  
  <!-- A simple progress bar with a label -->
  <progress value="50" label="Loading"></progress>
  
  <br>
  
  <!-- A progress bar with a maximum value -->
  <progress max="100" value="25"></progress>
</body>
</html>

Tips for Accessibility:

  • Use the aria-valuemin and aria-valuemax attributes to specify the minimum and maximum values of the progress bar for screen readers.
  • Provide a descriptive label attribute to identify the purpose of the progress bar.
  • Use a visually-contrasting color for the progress bar to improve visibility.