Definition
The <meter> HTML element is used to represent a scalar measurement or a value within a known range. It is commonly used to display visual representations of progress, levels, or other measurable quantities.
Here’s an example of how to use the <meter> element:
<label for="storage">Storage Usage:</label>
<meter id="storage" min="0" max="100" value="75">75%</meter>
In this example, the <meter> element is used to display the storage usage as a percentage. The min attribute specifies the minimum value of the range (0 in this case), the max attribute specifies the maximum value of the range (100 in this case), and the value attribute specifies the current value (75 in this case). The content within the <meter> element is used as a fallback for browsers that do not support the <meter> element or when the value cannot be determined.
The <meter> element provides a visual representation of the measurement using a horizontal bar or other graphical representation, with the filled portion representing the current value relative to the range. The appearance of the meter can be customized using CSS to match the design of your website.
You can also use the <meter> element with text descriptions using the low, high, and optimum attributes:
<meter min="0" max="10" value="7" low="4" high="8" optimum="5">
7 out of 10
</meter>
In this example, the <meter> element represents a value of 7 out of 10, with the low attribute indicating that values below 4 are considered low, the high attribute indicating that values above 8 are considered high, and the optimum attribute indicating the desired or optimal value.
It’s important to note that the visual appearance and behavior of the <meter> element can vary across different browsers. Therefore, it’s a good practice to test and style the <meter> element accordingly to ensure consistent user experience.