<meter> - scalar measurement

Basic Concept of the <meter> Tag

The <meter> tag is a semantic element introduced in HTML5, used to represent a scalar measurement or fractional value within a known range. It is typically employed to visualize proportions in scenarios such as disk usage, poll results, test scores, etc. Unlike the <progress> tag, <meter> displays static values rather than dynamic progress.

<meter value="0.6">60%</meter>

Core Attributes Explained

The <meter> tag supports several attributes for precise control over measurement display:

• value: Current measurement value (required attribute)
• min: Minimum range value (default: 0)
• max: Maximum range value (default: 1)
• low: Defines "low" threshold
• high: Defines "high" threshold
• optimum: Defines optimal value

<meter min="0" max="100" value="75">75/100</meter>

Threshold Range Applications

The low, high, and optimum attributes create segmented measurement displays. Browsers automatically adjust colors to indicate status:

<meter min="0" max="100" low="30" high="80" optimum="90" value="65">
  65/100 (Medium)
</meter>

Practical Use Cases

Disk Space Usage

<label>System Disk Usage:</label>
<meter min="0" max="500" value="375" low="100" high="450">375GB</meter>

Survey Results

<h3>User Satisfaction Survey</h3>
<p>Product Usability Rating:</p>
<meter min="1" max="5" value="4.2">4.2/5</meter>

Thermometer Effect

<label>Current Room Temperature:</label>
<meter min="-10" max="40" low="10" high="30" value="22">22°C</meter>

Custom Styling Techniques

While browsers provide default styling, CSS allows deep customization:

meter {
  width: 300px;
  height: 25px;
}

meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 10px;
}

meter::-webkit-meter-optimum-value {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
}

Differences from <progress>

<!-- Progress Bar Example -->
<progress value="70" max="100">70%</progress>

<!-- Meter Example -->
<meter value="0.7">70%</meter>

Browser Compatibility Handling

While modern browsers widely support <meter>, fallback solutions are needed for older versions:

<meter value="0.6">
  <div class="meter-fallback">
    <div style="width:60%"></div>
  </div>
  <span>60%</span>
</meter>

<style>
  .meter-fallback {
    display: inline-block;
    width: 100px;
    border: 1px solid #ccc;
  }
  .meter-fallback div {
    height: 20px;
    background: #4CAF50;
  }
</style>

Dynamic Value Updates

JavaScript enables real-time meter value updates:

<meter id="cpuMeter" min="0" max="100" value="30"></meter>

<script>
  setInterval(() => {
    const cpuUsage = Math.random() * 100;
    document.getElementById('cpuMeter').value = cpuUsage;
  }, 1000);
</script>

Form Integration Example

Combine <meter> with form elements for interactive displays:

<form>
  <label for="volume">Volume Control:</label>
  <input type="range" id="volume" min="0" max="100" oninput="updateMeter()">
  <meter id="volumeMeter" min="0" max="100" low="30" high="80"></meter>
</form>

<script>
  function updateMeter() {
    const volume = document.getElementById('volume').value;
    document.getElementById('volumeMeter').value = volume;
  }
</script>

Multilingual Support

Provide fallback content for different languages:

<meter value="0.75" min="0" max="1">
  <span lang="en">75% full</span>
  <span lang="zh">已用75%</span>
  <span lang="ja">75％使用中</span>
</meter>

Performance Dashboard

Complete system monitoring interface example:

<div class="monitor-panel">
  <h3>System Resource Monitor</h3>
  <div class="meter-group">
    <label>CPU Usage:</label>
    <meter id="cpu" high="90" optimum="60" value="45"></meter>
    <span id="cpuValue">45%</span>
  </div>
  <div class="meter-group">
    <label>Memory Usage:</label>
    <meter id="memory" high="85" optimum="50" value="70"></meter>
    <span id="memoryValue">70%</span>
  </div>
</div>

<script>
  // Simulate real-time data updates
  setInterval(() => {
    const cpu = Math.min(100, Math.random() * 100);
    const memory = Math.min(100, 30 + Math.random() * 60);
    
    const cpuMeter = document.getElementById('cpu');
    cpuMeter.value = cpu;
    document.getElementById('cpuValue').textContent = `${cpu.toFixed(1)}%`;
    
    const memoryMeter = document.getElementById('memory');
    memoryMeter.value = memory;
    document.getElementById('memoryValue').textContent = `${memory.toFixed(1)}%`;
  }, 1500);
</script>

Game Development Application

Display character status in game HUD:

<div class="game-hud">
  <div class="status-bar">
    <label>Health:</label>
    <meter class="health" min="0" max="100" low="25" high="90" value="65"></meter>
  </div>
  <div class="status-bar">
    <label>Mana:</label>
    <meter class="mana" min="0" max="100" low="10" high="80" value="40"></meter>
  </div>
</div>

<style>
  .game-hud {
    font-family: 'Arial', sans-serif;
    color: white;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 5px;
  }
  .health::-webkit-meter-optimum-value {
    background: #FF5252;
  }
  .mana::-webkit-meter-optimum-value {
    background: #536DFE;
  }
</style>

Educational Case Study

Create a student performance visualization component:

<div class="score-card">
  <h3>Final Exam Results</h3>
  <div class="subject">
    <label>Math:</label>
    <meter min="0" max="100" value="88" low="60" high="90"></meter>
    <span>88 points</span>
  </div>
  <div class="subject">
    <label>Language:</label>
    <meter min="0" max="100" value="76" low="60" high="90"></meter>
    <span>76 points</span>
  </div>
</div>