HTML `<meter>` Element: Creating Visual Gauges for Data Representation

Learn how to use the HTML `<meter>` element to display scalar measurements within a defined range, creating visual gauges for improved data presentation. This tutorial explains its attributes (`value`, `min`, `max`, etc.) and how to style it with CSS for clear and accessible data visualization.

Using the HTML `<meter>` Element to Display Gauges

Understanding the `<meter>` Element

The HTML `<meter>` element represents a scalar measurement within a known range. Think of it as a gauge—a visual way to display a value within a defined minimum and maximum. This is useful for providing users with quick visual feedback. The `<meter>` element itself does not dictate the visual appearance; you would typically use CSS (Cascading Style Sheets) to style the gauge. The `value` attribute is required. It’s important to use this semantic element correctly to improve both the structure and accessibility of your web pages.

Using the `<meter>` Element

To create a gauge using the `<meter>` element, you specify the current value using the `value` attribute. You can optionally provide the minimum (`min`), maximum (`max`), optimum (`optimum`), low (`low`), and high (`high`) values to further define the context of your gauge. For example:

<meter min="0" max="10" value="2">2 out of 10</meter>

This creates a gauge showing a value of 2 out of a maximum of 10. The text between the opening and closing `<meter>` tags is displayed to the user.

Browser Support for `<meter>`

The `<meter>` element is well-supported by modern browsers.

Attributes of the `<meter>` Element

The `<meter>` element also supports standard HTML global and event attributes.