<meter>

Definition and Usage

The <meter> element establishes a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

The <meter> element should be used to display measurements like disk usage, relevance of query results, or the fraction of a voting population. It should NOT be used to indicate progress (use <progress> instead).

Common uses for the <meter> element:

• Disk space usage
• Battery level
• Temperature gauges
• Relevance of search results
• Ratings and scores
• Capacity indicators

Attributes

Examples

Basic Disk Usage

Display disk space usage as a percentage:

<label for="disk">Disk Usage:</label>
<meter id="disk" value="75" min="0" max="100">75%</meter>
<span>75% used</span>

Download Progress with Optimum Range

Show download speed with optimal, low, and high ranges:

<label for="download">Download Speed:</label>
<meter id="download"
       value="8.5"
       min="0"
       max="10"
       low="3"
       high="7"
       optimum="9">
  8.5 MB/s
</meter>
<span>8.5 MB/s</span>

Score or Rating

Display a score or rating out of a maximum value:

<label for="score">Test Score:</label>
<meter id="score"
       value="85"
       min="0"
       max="100"
       low="50"
       high="80"
       optimum="100">
  85 out of 100
</meter>
<span>85/100</span>

Temperature Gauge

Create a temperature gauge with safe and danger zones:

<label for="temp">CPU Temperature:</label>
<meter id="temp"
       value="65"
       min="0"
       max="100"
       low="40"
       high="75"
       optimum="30">
  65°C
</meter>
<span>65°C</span>

Styled Meter with CSS

Customize the appearance of the meter element:

<style>
  meter {
    width: 300px;
    height: 30px;
  }

  /* WebKit/Blink browsers */
  meter::-webkit-meter-bar {
    background: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 15px;
  }

  meter::-webkit-meter-optimum-value {
    background: #4CAF50;
  }

  meter::-webkit-meter-suboptimum-value {
    background: #FF9800;
  }

  meter::-webkit-meter-even-less-good-value {
    background: #f44336;
  }

  /* Firefox */
  meter::-moz-meter-bar {
    background: #4CAF50;
  }
</style>

<meter value="75" min="0" max="100" low="30" high="70" optimum="90">
  75%
</meter>

Battery Level Indicator

Display battery level with color indicators:

<label for="battery">Battery Level:</label>
<meter id="battery"
       value="45"
       min="0"
       max="100"
       low="20"
       high="80"
       optimum="95">
  45%
</meter>
<span>45% remaining</span>

Multiple Meters in a Dashboard

Create a dashboard with multiple measurements:

<style>
  .dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
  }

  .gauge {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
  }

  .gauge meter {
    width: 100%;
    height: 24px;
    margin: 10px 0;
  }
</style>

<div class="dashboard">
  <div class="gauge">
    <h3>CPU Usage</h3>
    <meter value="65" min="0" max="100" low="30" high="80" optimum="50">65%</meter>
    <p>65%</p>
  </div>

  <div class="gauge">
    <h3>Memory</h3>
    <meter value="82" min="0" max="100" low="40" high="85" optimum="50">82%</meter>
    <p>82%</p>
  </div>

  <div class="gauge">
    <h3>Disk Space</h3>
    <meter value="45" min="0" max="100" low="20" high="75" optimum="30">45%</meter>
    <p>45%</p>
  </div>
</div>

Try it Yourself

Meter vs Progress Comparison

Color Regions Explained

The <meter> element automatically displays different colors based on three regions:

• Optimal (Green): When the value is in the optimal range. Defined by the optimum attribute and its proximity to low and high.
• Suboptimal (Yellow/Orange): When the value is acceptable but not optimal. This is the middle range.
• Critical (Red): When the value is in a critical or undesirable range.

Styling with CSS

You can customize the appearance of the <meter> element using CSS pseudo-elements:

• ::-webkit-meter-bar - The outer container (WebKit/Blink)
• ::-webkit-meter-optimum-value - The optimal value bar (green)
• ::-webkit-meter-suboptimum-value - The suboptimal value bar (yellow)
• ::-webkit-meter-even-less-good-value - The critical value bar (red)
• ::-moz-meter-bar - The value bar (Firefox)

Best Practices

• Use <meter> for gauges and measurements, NOT for progress bars
• Always set appropriate low, high, and optimum values for automatic color coding
• Provide fallback text between the opening and closing tags for accessibility
• Include a <label> to describe what the meter represents
• Display the actual value as text alongside the meter for clarity
• Ensure the value is between min and max
• Use consistent units across related meters (all percentages or all MB, etc.)
• Consider adding aria-label or aria-describedby for better accessibility
• Test meter appearance across different browsers as styling support varies

Accessibility Considerations

• Always include fallback text content inside the meter element
• Use a <label> element with the for attribute to describe the meter
• Provide the numerical value as visible text near the meter
• Don't rely solely on color to convey meaning (some users may have color blindness)
• Consider using aria-label or aria-labelledby for additional context
• Ensure sufficient color contrast between the meter and background

Default CSS Settings

Most browsers will display the <meter> element with the following default values:

meter {
  display: inline-block;
  width: 5em;
  height: 1em;
  vertical-align: -0.2em;
}

Related Tags

• <progress>

  Displays task progress

• <input>

  Defines an input field

• <output>

  Displays calculation results

• <label>

  Defines a label for an input

• <form>

  Defines an HTML form

• <datalist>

  Defines input options