The HTML <meter> tag is used to represent scalar measurements within a known range or a fractional value. It is often employed to create visual gauges or meters that show how close a value is to its maximum or minimum. For example, the <meter> tag is perfect for showing battery levels, disk space usage, or any progress within a specified range.
By using the <meter> tag, web developers can create visually appealing, interactive elements that enhance user experience and improve data visualization. It is especially useful for presenting performance statistics, percentages, and rating systems.
Syntax of the <meter> Tag
The basic syntax of the HTML <meter> tag includes defining a value and its corresponding minimum and maximum values:
<meter value="current_value" min="min_value" max="max_value">Fallback Text</meter>
- value: The current numeric value represented by the meter.
- min: The minimum value the meter can represent (optional; defaults to 0).
- max: The maximum value the meter can represent (required).
- Fallback Text: The text displayed if the browser doesn’t support the <meter> tag.
The <meter> tag also supports several optional attributes that enhance its functionality, which are discussed in the next section.
Attributes of the <meter> Tag
The <meter> tag comes with a variety of attributes that help customize its functionality and appearance. Here are the key attributes:
| Attribute | Description |
|---|---|
| value | Specifies the current numeric value being measured (required). |
| min | Defines the minimum value the meter can represent (optional). Defaults to 0. |
| max | Defines the maximum value the meter can represent (required). |
| low | Indicates the range considered as a "low" value (optional). |
| high | Indicates the range considered as a "high" value (optional). |
| optimum | Defines the optimal or "ideal" value for the meter (optional). |
| global attributes | Supports global attributes like class, id, lang, and style for customization. |
Examples of the HTML <meter> Tag
Example 1: Basic Meter to Display Battery Level
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Battery Level Meter</title>
</head>
<body>
<p>Battery Level:</p>
<meter value="0.6" min="0" max="1">60%</meter>
</body>
</html>
In this example, the <meter> tag shows the battery level at 60% of its full capacity. The value attribute is set to "0.6" (representing 60%), with the minimum value as "0" and maximum as "1" (100%).
Example 2: Disk Space Usage Indicator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disk Space Usage</title>
</head>
<body>
<p>Disk Usage:</p>
<meter value="700" min="0" max="1000" low="300" high="800" optimum="500">
700MB of 1000MB used
</meter>
</body>
</html>
This example represents the usage of disk space. The value is set to 700MB out of 1000MB. The low attribute indicates that values under 300MB are considered low, and the high attribute marks values above 800MB as high. The optimum value is set at 500MB for ideal usage.
FAQs About HTML <meter> Tag
Q1: What is the purpose of the HTML <meter> tag?
A: The <meter> tag is used to represent a scalar measurement or value within a defined range. It is often used to visually depict progress or capacity, such as battery levels or performance metrics.
Q2: How is the <meter> tag different from the <progress> tag?
A: The <meter> tag is used for measurable values within a known range (e.g., temperature or disk usage), whereas the <progress> tag is used for tasks where the total work may not be known, such as the completion of a file upload.
Q3: Does the <meter> tag support global attributes?
A: Yes, the <meter> tag supports global attributes like class, id, lang, and style, which can be used to style or identify the element in the document.
Q4: Can I use the <meter> tag without defining a minimum and maximum value?
A: The max attribute is required, but the min attribute is optional. If the min attribute is not defined, it defaults to 0.
Q5: Is the <meter> tag supported in all browsers?
A: The <meter> tag is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. However, fallback text can be provided for older browsers that don’t support the tag.
