The <meter> tag is used to represent a scalar measurement within a known range, or a fractional value. It is commonly used to display the progress of a task or the level of completeness of a goal.
The <meter> tag has several attributes that can be used to customize its appearance and behavior:
value: Specifies the current value of the meter. This attribute is required.min: Specifies the minimum value of the meter. The default value is 0.max: Specifies the maximum value of the meter. The default value is 1.low: Specifies the value below which the meter is considered to be low. This attribute is optional.high: Specifies the value above which the meter is considered to be high. This attribute is optional.optimum: Specifies the optimal value of the meter. This attribute is optional.The <meter> tag can be used in conjunction with the <label> tag to provide a textual description of the meter's purpose:
<label for="progress">Progress:</label> <meter id="progress" value="0.6">60%</meter>
The text content of the <meter> tag is used as a fallback for browsers that do not support the tag or for screen readers:
<meter value="0.6">60% complete</meter>
Example 1: Basic usage of the <meter> tag:
<meter value="0.6"></meter>
Example 2: Using the min and max attributes:
<meter value="50" min="0" max="100"></meter>
Example 3: Using the low, high, and optimum attributes:
<meter value="75" min="0" max="100" low="30" high="80" optimum="90"></meter>
Example 4: Using the <label> tag:
<label for="progress">Progress:</label> <meter id="progress" value="0.6"></meter>
Example 5: Using text content as a fallback:
<meter value="0.6">60% complete</meter>