Path // www.yourhtmlsource.com → Reference → <meter>

<meter>

by Ross Shannon

The <meter> element represents a scalar measurement within a known range, or a fractional value. It displays a visual gauge that shows where a value falls within a defined range. Common uses include displaying disk usage, battery level, password strength, or poll results. The meter element is not for showing progress - use <progress> for that purpose.

Clock This page was last updated on 2025-11-17


Syntax

<meter value="0.6" min="0" max="1">60%</meter>

The element requires both opening and closing tags. The value attribute is required. Text content between the tags provides a fallback for browsers that don't support the element.

Attributes

  • value (required) - The current value. Must be between min and max.
  • min - The lower bound of the range (default: 0)
  • max - The upper bound of the range (default: 1)
  • low - The upper bound of the "low" range. Values below this are considered low.
  • high - The lower bound of the "high" range. Values above this are considered high.
  • optimum - The optimal value. Affects color rendering based on where value falls.
  • form - Associates the meter with a form by its id
  • Global attributes - Supports standard attributes like id, class, style

The low, high, and optimum attributes control the visual appearance. Browsers typically show green when the value is in the optimal range, yellow for acceptable, and red for poor.

Examples

Disk Space Usage

<label for="disk">Disk Usage:</label>
<meter id="disk" value="0.75" min="0" max="1"
       low="0.3" high="0.8" optimum="0.2">
  75% used
</meter>

Password Strength

<label for="strength">Password Strength:</label>
<meter id="strength" value="3" min="0" max="5"
       low="2" high="4" optimum="5">
  3 out of 5
</meter>

Battery Level

<p>Battery:
  <meter value="0.2" min="0" max="1"
         low="0.25" high="0.75" optimum="1">
    20% remaining
  </meter>
</p>

When to Use

Use the <meter> element when:

  • Displaying scalar measurements with known ranges
  • Showing disk usage, memory usage, or storage levels
  • Indicating password strength or input quality
  • Presenting voting results or poll percentages
  • Visualizing sensor readings (temperature, humidity)
  • Any measurement where the range is fixed and known

Accessibility and best practices:

  • Always provide fallback text content between the tags
  • Associate with a label for context
  • Use meaningful low, high, and optimum values for visual feedback
  • Don't use meter for progress - use <progress> instead
  • Screen readers announce the value and range
  • Add aria-label or aria-labelledby if additional context is needed
  • The visual appearance varies by browser - test accordingly
  • Can be styled with CSS (appearance: none; for custom styling)
  • Update dynamically with JavaScript if needed
  • <progress> - Shows progress toward a completion (different use case)
  • <output> - Displays calculation results
  • <label> - Labels for the meter element
  • <form> - Parent form container

When to use meter vs. progress:

<!-- METER: Scalar value within known range -->
<p>Disk space: <meter value="0.6">60% used</meter></p>

<!-- PROGRESS: Task completion status -->
<p>Download: <progress value="60" max="100">60%</progress></p>