The <meter> HTML element is used to represent a scalar measurement within a known range, or a fractional value. This element is ideal for displaying data that falls within a specific range, such as disk usage, temperature, or progress toward a goal. The <meter> element is different from the <progress> element, which is used to indicate the progress of a task.
Usage and Characteristics
The <meter> element is typically used to display a value within a bounded range, with attributes to define the range and the current value. It provides a visual representation of the data, often rendered as a horizontal bar. Here is an example of how the <meter> tag can be used:
<label for="disk-usage">Disk Usage:</label>
<meter id="disk-usage" value="0.6" min="0" max="1">60%</meter>Valid Attributes for <meter>
| Attribute | Description |
|---|---|
| value | Specifies the current value of the measurement. |
| min | Defines the minimum value of the range. |
| max | Defines the maximum value of the range. |
| low | Specifies a lower bound of the "low" range, which can be used for styling. |
| high | Specifies an upper bound of the "high" range, which can be used for styling. |
| optimum | Indicates the optimal value or range for the measurement. |
The <meter> element supports all global attributes, allowing for additional customization and interaction through CSS and JavaScript.
Benefits and Considerations
Semantic Meaning: The
<meter>element provides semantic meaning by indicating that the enclosed content represents a measurement within a defined range.Accessibility: Proper use of the
<meter>element, including attributes likemin,max, andvalue, enhances accessibility by providing clear information about the measurement to assistive technologies.Styling Flexibility: The
<meter>element can be styled using CSS to match the design of the webpage, allowing for customization of its appearance.
In summary, the <meter> element is a useful tool for displaying measurements within a defined range. It provides semantic clarity and visual representation of data, enhancing both the accessibility and usability of web content. Its attributes allow developers to specify the range and current value, making it suitable for various applications where scalar measurements are needed.