The role and usage scenarios of the '<meter>' tag

The <meter> tag is an HTML5 element used to represent scalar measurements within a known range, suitable for scenarios such as displaying disk usage or poll results. It visualizes data while also providing semantic features that help browsers and assistive technologies understand the content.

Basic Syntax of the <meter> Tag

The basic syntax structure of the <meter> tag is as follows:

<meter value="current_value" min="minimum_value" max="maximum_value" low="low_threshold" high="high_threshold" optimum="optimal_value">
  Fallback content
</meter>

Key attribute explanations:

• value: Required attribute, represents the current measurement value.
• min and max: Define the measurement range, defaulting to 0 and 1, respectively.
• low: Defines the "low" threshold.
• high: Defines the "high" threshold.
• optimum: Indicates the position of the optimal value.

If the browser does not support the <meter> tag, the fallback content inside the tag will be displayed.

Core Functionality of the <meter> Tag

The core functionality of the <meter> element is to visually display a value within a range. Unlike <progress>, it represents a static measurement rather than progress. Browsers typically render it as a bar chart and may change colors based on the value's position:

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

This example will display a bar filled to 60%. Different browsers may use different color schemes. When the value falls within the normal range defined by low and high, it may appear green; outside this range, it may turn yellow or red.

Typical Use Cases

Disk Space Usage

Displaying storage device usage is a classic application of <meter>:

<meter value="75" min="0" max="100" low="10" high="90" optimum="50">
  75GB used (out of 100GB)
</meter>

Survey Results

Visualizing survey results:

<p>Product satisfaction:</p>
<meter value="4.3" min="1" max="5" low="2" high="4">4.3/5 points</meter>

Temperature Display

Showing where a temperature falls within a normal range:

<p>Current room temperature:</p>
<meter value="22" min="10" max="30" low="15" high="25" optimum="20">
  22°C (ideal range 15-25°C)
</meter>

Differences Between <meter> and <progress> Tags

Although they look similar, <meter> and <progress> have fundamental differences:

<!-- Progress bar example -->
<progress value="70" max="100">70%</progress>

<!-- Measurement example -->
<meter value="70" min="0" max="100">70/100</meter>

Advanced Usage and Custom Styling

Dynamic Updates with JavaScript

Although <meter> typically represents static values, it can also be updated dynamically:

<meter id="tempMeter" value="20" min="-10" max="40"></meter>

<script>
  setInterval(() => {
    const temp = 20 + Math.random() * 10 - 5; // Simulate temperature fluctuations
    document.getElementById('tempMeter').value = temp.toFixed(1);
  }, 2000);
</script>

Custom CSS Styling

You can modify the default styling using CSS:

<style>
  meter {
    width: 300px;
    height: 25px;
  }
  
  meter::-webkit-meter-bar {
    background: #eee;
    border-radius: 10px;
  }
  
  meter::-webkit-meter-optimum-value {
    background: linear-gradient(to right, #2ecc71, #27ae60);
  }
  
  meter::-webkit-meter-suboptimum-value {
    background: linear-gradient(to right, #f39c12, #e67e22);
  }
  
  meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(to right, #e74c3c, #c0392b);
  }
</style>

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

Accessibility Considerations

Provide appropriate accessibility support for <meter>:

<meter value="8" min="0" max="10" 
       aria-label="Current rating: 8 out of 10">
  8/10 points
</meter>

Or use aria-labelledby to associate descriptive text:

<p id="scoreLabel">User rating:</p>
<meter value="8" min="0" max="10" aria-labelledby="scoreLabel"></meter>

Practical Application Examples

Nutrition Facts Table

Displaying the proportion of daily recommended nutrient intake:

<h3>Nutrition per serving</h3>
<ul>
  <li>Protein:
    <meter value="25" min="0" max="50">25g</meter>
  </li>
  <li>Carbohydrates:
    <meter value="40" min="0" max="300">40g</meter>
  </li>
  <li>Fat:
    <meter value="15" min="0" max="65" high="50">15g</meter>
  </li>
</ul>

Project Budget Usage

Showing budget utilization progress:

<p>Project budget usage:</p>
<meter value="45000" min="0" max="50000" low="10000" high="45000">
  $45,000/$50,000
</meter>
<p>Warning colors will appear when usage exceeds $45,000.</p>

Browser Compatibility and Fallback Solutions

Although modern browsers generally support <meter>, compatibility solutions should be considered:

<meter value="75" min="0" max="100" id="myMeter">
  <div class="meter-fallback">
    <div class="meter-value" style="width:75%"></div>
  </div>
  <span class="meter-text">75%</span>
</meter>

<style>
  .meter-fallback {
    display: inline-block;
    width: 200px;
    height: 20px;
    background: #eee;
  }
  
  .meter-value {
    height: 100%;
    background: #2ecc71;
  }
  
  meter .meter-fallback {
    display: none;
  }
</style>

This solution will display a CSS-based fallback style in browsers that do not support <meter>, while hiding the fallback content in supported browsers.