HTML <meter> Tag

The HTML <meter> element represents a scalar measurement within a known range, or a fractional value, essentially providing a way to display a measurement or a “gauge” on a webpage. Unlike progress bars, which typically indicate the completion of a task, the <meter> tag is meant to reflect a measurement relative to a minimum and maximum value, giving users an intuitive visual representation of that data.

For example, it can be used to show disk usage, battery level, temperature, or any other numeric value that falls within a specific range. The <meter> element can also indicate an optimal range, allowing developers to visually emphasize when a measurement is within or outside a desired threshold.

Visually, browsers typically render <meter> as a horizontal bar that fills proportionally according to its value relative to the specified range. Some browsers may apply color coding, such as green for safe levels, yellow for caution, and red for high or critical levels, although this can often be customized using CSS.

The <meter> element is semantic, meaning it not only provides a visual cue but also carries meaning for accessibility technologies. Screen readers can interpret its values, informing users about the current state of the measurement even if they cannot see the visual bar.