HTML optimum Attribute

Introduction

The optimum attribute is used on the <meter> element to mark the preferred or ideal value on a gauge scale. Together with min, max, and value, it helps browsers show whether the current reading is in a good, medium, or poor zone (colors vary by browser). Use it for disk usage (lower is better), test scores (higher is better), or any measurement with a clear target. It is not form validation — it does not apply to input or progress. Set meter.optimum in JavaScript when the target changes.

What You’ll Learn

Purpose of optimum Attribute

The primary purpose of optimum is to tell the browser where the ideal point lies on a <meter> scale. The browser compares value to optimum and may color the bar to suggest good vs suboptimal readings — without extra CSS or JavaScript.

Choose optimum based on what “good” means for your metric. For a test score out of 100, optimum="80" means 80% is the target. For disk usage, optimum="20" means low usage is preferred. Always pair with min, max, and value.

📝 Syntax

Add optimum on a meter element with min, max, and value:

<label for="progress">Task progress:</label>
<meter
  id="progress"
  value="60"
  min="0"
  max="100"
  optimum="75">
  60%
</meter>

Syntax Rules

• Valid only on <meter> — not on progress or input.
• Value is a number between min and max (inclusive).
• Always include min, max, and value on the same element.
• Include fallback text inside <meter> for browsers without support.
• JavaScript IDL property: meter.optimum = 90 (number).
• Browser colors depend on where value sits relative to optimum.
• Do not confuse meter (measurement with range) with progress (completion).

💎 Values

The optimum attribute accepts a numeric value on the meter scale:

• optimum="75" with min="0" max="100" — 75 is the ideal target on a 0–100 scale.
• optimum="20" on disk usage — Lower usage is preferred (optimum near the low end).
• optimum="90" on a quiz score — Higher scores are preferred (optimum near the high end).

<!-- Higher is better -->
<meter value="72" min="0" max="100" optimum="80">72%</meter>

<!-- Lower is better -->
<meter value="85" min="0" max="100" optimum="25">85% used</meter>

Applicable Elements

optimum vs value vs progress

Examples Gallery

Task progress meter, dynamic meter.optimum, and lower-is-better vs higher-is-better gauges.

<p>Task progress:</p>
<meter
  value="60"
  min="0"
  max="100"
  optimum="75">
  60 out of 100
</meter>

<meter id="dynamicMeter" value="85" min="0" max="100">85%</meter>

<script>
  document.getElementById("dynamicMeter").optimum = 90;
</script>

<!-- Disk usage: low is good -->
<meter value="85" min="0" max="100" optimum="25">85% used</meter>

<!-- Quiz score: high is good -->
<meter value="72" min="0" max="100" optimum="80">72%</meter>

♿ Accessibility

• Label meters — Associate each meter with a visible <label> or nearby heading.
• Fallback text — Put the numeric value inside <meter> for older browsers.
• Do not rely on color alone — State the value and target in text (e.g. “60% — target 75%”).
• meter vs progress — Use progress for known completion; meter for measurements against a range.
• Screen readers — May announce the value; supplement with explicit optimum in prose when it matters.

💡 Best Practices