HTML <meter> Tag
The <meter> tag in HTML is used to display a scalar measurement within a specific range. It's a semantic element that provides a visual representation of a value, making it useful for showcasing things like disk usage, relevance of a search query, or even the percentage of a task completed (although for progress representation the <progress> tag is generally more suitable). The visual appearance of the meter will vary based on browser and OS.
Syntax
<meter value="number" min="number" max="number" low="number" high="number" optimum="number">
Fallback Content
</meter>
Attributes
| Attribute | Value | Description |
|---|---|---|
| value | number | The current value of the measurement. Must be between the min and max values. |
| min | number | Specifies the minimum value of the range. Default is 0. |
| max | number | Specifies the maximum value of the range. Default is 1. |
| low | number | Defines the lower bound of the low range. Must be less than or equal to the high attribute and less than the optimum attribute. |
| high | number | Defines the upper bound of the high range. Must be greater than or equal to the low attribute and greater than the optimum attribute. |
| optimum | number | Specifies the optimal value for the measurement. If the current value is closer to the optimum then the gauge will show as more favorable |
Example
<meter value="60" min="0" max="100">60 out of 100</meter>
This simple example displays a meter with a value of 60, with a range from 0 to 100. The text "60 out of 100" is fallback content that is displayed in browsers that do not support the <meter> tag.
More Examples
Example 1: Disk Usage
<p>Disk Usage: <meter value="75" min="0" max="100" low="20" high="80" optimum="50">75%</meter> (75% full)</p>
This meter shows disk usage at 75% with low and high watermarks at 20% and 80%, and optimum at 50%
Example 2: Battery Level
<p>Battery Level: <meter value="0.8" min="0" max="1" low="0.2" high="0.8" optimum="0.9">80%</meter></p>
Here, we display a battery level as a decimal value between 0 and 1
Example 3: Search Relevance
<p>Search Result Relevance: <meter value="0.7" min="0" max="1" optimum="1">High Relevance</meter></p>
This example shows the relevance of a search result, where a higher value indicates higher relevance.
Example 4: Using Low, High, and Optimum
<p>Temperature: <meter value="25" min="0" max="50" low="10" high="40" optimum="20">25°C</meter></p>
<p>Temperature: <meter value="12" min="0" max="50" low="10" high="40" optimum="20">12°C</meter></p>
<p>Temperature: <meter value="42" min="0" max="50" low="10" high="40" optimum="20">42°C</meter></p>
In this example, the meter will display the temperature using low, high and optimum attribute where an optimum temperature is around 20 degree.
Example 5: Fallback content
<meter value="0.6">60%</meter>
If the browser does not support <meter> tag, the content inside the tag will display.
Browser Support
The <meter> tag is supported in all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Use the
<meter>tag for displaying scalar values within a known range. For progress of a task, use the<progress>tag instead. - The
value,min, andmaxattributes are essential for defining the measurement range. - The
low,high, andoptimumattributes allow you to visually indicate which parts of the range are considered low, high, and optimal. This will alter how the gauge is displayed to users. - Always include fallback content within the
<meter>tags for browsers that do not support the tag. - Avoid using meter tag for simple progress bar scenarios, the
progresstag is generally better. - Use CSS for styling the meter to match your website's design. You can target the meter element to apply custom styling like colors, width and height.
- Ensure the fallback content is readable and provides the same information as the meter tag, for better accessibility.
