Struct Meter 

pub struct Meter;

The <meter> element - represents a scalar measurement within a known range.

Purpose

The <meter> element represents a scalar measurement within a known range, or a fractional value. Used for displaying measurements like disk usage, voting results, relevance scores, or any gauge-style indicator. Unlike <progress>, which shows task completion, <meter> shows a measurement on a scale.

Content Categories

• Flow Content
• Phrasing Content
• Palpable Content

Permitted Content Model

• Phrasing content (fallback for browsers without meter support, but no <meter> descendants)

Common Use Cases

• Disk space usage indicators
• Battery level displays
• Rating or scoring displays
• Temperature or volume gauges
• Relevance or match percentages

Key Attributes

• value: Current value (required)
• min: Lower bound of range (default: 0)
• max: Upper bound of range (default: 1)
• low: Upper bound of “low” range
• high: Lower bound of “high” range
• optimum: Optimal value in the range

Example

<!-- Basic meter -->
<label for="disk-usage">Disk usage:</label>
<meter id="disk-usage" value="0.6">60%</meter>

<!-- Meter with full range specification -->
<label for="battery">Battery level:</label>
<meter id="battery"
       min="0" max="100"
       low="20" high="80"
       optimum="100"
       value="65">65%</meter>

<!-- High value is bad (e.g., CPU usage) -->
<label for="cpu">CPU usage:</label>
<meter id="cpu"
       min="0" max="100"
       low="25" high="75"
       optimum="0"
       value="85">85%</meter>

<!-- Low value is bad (e.g., fuel) -->
<label for="fuel">Fuel level:</label>
<meter id="fuel"
       min="0" max="100"
       low="20" high="80"
       optimum="100"
       value="15">15%</meter>

<!-- Rating display -->
<p>
  Rating:
  <meter min="0" max="5" value="4.2">4.2 out of 5</meter>
  4.2 out of 5 stars
</p>

<!-- Storage usage -->
<p>
  Storage used:
  <meter min="0" max="1000" low="700" high="900" value="852">
    852 GB of 1000 GB
  </meter>
  852 GB / 1 TB
</p>

<!-- Temperature gauge -->
<label for="temp">Room temperature:</label>
<meter id="temp"
       min="0" max="50"
       low="18" high="28"
       optimum="22"
       value="25">25°C</meter>

Accessibility

• Provide text content as fallback
• Use labels to describe what’s being measured
• Ensure color isn’t the only indicator of status
• Browser typically colors the meter based on value ranges
• Screen readers announce the value and context

WHATWG Specification

• 4.10.14 The meter element

Trait Implementations

impl HtmlElement for Meter

const TAG: &'static str = "meter"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: PhrasingContent> CanContain<T> for Meter

impl FlowContent for Meter

impl PalpableContent for Meter

impl PhrasingContent for Meter