StackCode

What is the Purpose of the `<meter>` and `<progress>` HTML Elements?

Published in HTML5 Features 3 mins read

6

The <meter> and <progress> HTML elements are used to visually represent numerical values within a defined range, providing users with a clear understanding of progress or measurement. While they share a common purpose, they have distinct applications and functionalities.

<meter>: Measuring Values Across a Range

The <meter> element is designed to display a measured value within a defined range. It's ideal for representing quantities like:

  • Fuel levels: A car's fuel gauge could use <meter> to visually indicate the amount of fuel remaining.
  • Performance metrics: Displaying a user's performance score in a game or quiz.
  • Resource utilization: Showing CPU or memory usage in a system monitoring tool.

Key Attributes:

  • value: Represents the current value being measured.
  • min: Defines the minimum value of the range.
  • max: Defines the maximum value of the range.
  • low: Specifies a lower threshold within the range, typically visually highlighted.
  • high: Specifies an upper threshold within the range, typically visually highlighted.
  • optimum: Indicates the ideal or optimal value within the range.

Example:

<meter value="50" min="0" max="100" low="20" high="80" optimum="70">
  Fuel Level: 50%
</meter>

This code would display a meter with a value of 50%, indicating a fuel level between 20% and 80%, with the optimal level being 70%.

<progress>: Tracking Progress Towards a Goal

The <progress> element is specifically designed to represent progress towards a goal. It typically shows how much of a task has been completed, providing visual feedback to users. Common applications include:

  • File uploads: Displaying the progress of a file upload.
  • Downloads: Visualizing the download progress of a file.
  • Task completion: Showing the completion status of a multi-step process.

Key Attributes:

  • value: Represents the current progress, typically expressed as a percentage.
  • max: Defines the total value representing the completion of the task.

Example:

<progress value="75" max="100">75% complete</progress>

This code would display a progress bar indicating 75% completion of a task.

Key Differences:

While both elements visually represent numerical values, the primary difference lies in their intended use:

  • <meter>: Measures and displays a value within a defined range, focusing on the current state.
  • <progress>: Tracks progress towards a goal, focusing on the completion status.

Accessibility Considerations:

Both <meter> and <progress> are designed to be accessible to users with disabilities. They can be customized with ARIA attributes to provide additional context and alternative representations for screen readers. For example, using the aria-label attribute can provide a descriptive label for the element, enhancing its accessibility.

Conclusion:

The <meter> and <progress> elements provide essential tools for web developers to visually represent numerical values and progress in a user-friendly and accessible manner. Understanding their distinct functionalities allows for effective and efficient application within web development projects.

Further Reading:

Related Articles