HTML meter tag
The <meter>
tag in HTML represents a scalar measurement within a known range, or a fractional value. It is commonly used to display values like disk usage, voting results, fuel gauge, or any other quantity that falls within a specific range.
Key Features:
- The
<meter>
element is used when you know both the minimum and maximum values of the range. - It can display the current value visually as a bar or gauge in supporting browsers.
- The
<meter>
tag should not be confused with the<progress>
tag, which is used to indicate progress (typically for tasks that are ongoing).
Attributes of the <meter>
Tag:
value
(required): The current numeric value within the defined range.min
: The minimum value of the range. If omitted, the default is0
.max
: The maximum value of the range. If omitted, the default is1
.low
: A value below which the measurement is considered low.high
: A value above which the measurement is considered high.optimum
: The "ideal" value within the range (often the target or the most desirable value).
Example of the <meter>
Tag:
<label for="disk-usage">Disk Usage:</label>
<meter id="disk-usage" value="0.6" min="0" max="1">60%</meter>
This will display a meter representing 60% disk usage, where 0
is the minimum and 1
is the maximum.
Advanced Example with More Attributes:
<label for="fuel">Fuel Level:</label>
<meter id="fuel" value="0.3" min="0" max="1" low="0.2" high="0.8" optimum="0.9">
30%
</meter>
In this example:
- The current fuel level is 30% (
value="0.3"
). - If the value drops below 20% (
low="0.2"
), the meter will display the value as low (in red in some browsers). - If the value is above 80% (
high="0.8"
), the meter will display the value as high. - The optimum fuel level is 90% (
optimum="0.9"
), indicating this is the ideal value.
Visual Representation:
The browser will render the <meter>
element as a horizontal bar, with a portion filled according to the value
. The exact appearance can vary between browsers, but by default:
- Green for values within the normal range.
- Red or orange for values outside the defined "low" or "high" thresholds.
CSS Customization:
The appearance of the <meter>
can be customized using CSS, though some browser implementations may limit styling options.
meter {
width: 300px;
height: 20px;
}
Use Cases:
- Disk Usage: Indicating how much disk space is used out of the total capacity.
- Battery Level: Showing the remaining battery life.
- Voting Results: Displaying the percentage of votes a candidate or option has received.
- Fuel Gauge: Visualizing fuel levels in a vehicle or tank.
Example in a Voting Context:
<label for="candidateA">Votes for Candidate A:</label>
<meter id="candidateA" value="75" min="0" max="100">75%</meter>
Key Points:
- Use for known ranges: The
<meter>
tag is perfect when you have a predefined range and want to visually represent where the current value falls within that range. - Not for Progress Bars: If you're showing progress toward completion (e.g., file upload), use the
<progress>
tag instead of<meter>
. - Accessibility: Always include a text label or description (e.g., "75%") for users relying on assistive technology like screen readers.
In summary, the <meter>
tag is useful for displaying numeric values within a defined range, providing a visual representation of measurements like performance, capacity, or other metrics.