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:

  1. value (required): The current numeric value within the defined range.
  2. min: The minimum value of the range. If omitted, the default is 0.
  3. max: The maximum value of the range. If omitted, the default is 1.
  4. low: A value below which the measurement is considered low.
  5. high: A value above which the measurement is considered high.
  6. 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.