HTML high Attribute

What You’ll Learn

The high attribute sets the lower bound of the upper range on a <meter> element. It works only on <meter>—not on <input>, range sliders, or form validation. Together with min, max, low, optimum, and value, it helps browsers color-code gauge readings for disk usage, scores, and capacity indicators.

Purpose of high Attribute

The high attribute defines where the upper (warning) region begins on a <meter> scale. Values above high fall into the high segment, which browsers typically render with a warning color. It does not cap the meter’s maximum—that is what max does.

Use high alongside min, max, low, optimum, and value to create semantic gauges for disk usage, test scores, battery levels, and similar measurements. When low is also set, the constraint is min ≤ low ≤ high ≤ max.

📝 Syntax

Add high to a <meter> element with a numeric value within the scale:

<!-- Disk usage: value below high threshold -->
<label for="disk">Disk usage:</label>
<meter
  id="disk"
  value="75"
  min="0"
  max="100"
  low="60"
  high="90"
  optimum="40">75%</meter>

<!-- Capacity meter with high threshold -->
<meter value="120" min="0" max="200" high="180">120/200</meter>

Syntax Rules

• high applies only to the <meter> element—not to <input>, <progress>, or other elements.
• The value must be a valid floating-point number within the meter’s scale defined by min and max.
• When low is set, ensure min ≤ low ≤ high ≤ max.
• high marks the lower bound of the upper range—values above it enter the high (warning) segment.
• Pair with value (current reading), min/max (scale bounds), and optionally low and optimum.
• Use <progress> for completion bars; use <meter> for gauges with semantic thresholds.

💎 Values

The high attribute accepts a floating-point number representing a point on the meter scale:

• high="90" — Upper range begins at 90 on a 0–100 scale. Values above 90 show in the high segment.
• high="180" — On a 0–200 scale, the warning zone starts at 180.
• high="0.8" — Valid on a 0–1 scale (default min/max when omitted).
• Attribute absent — No explicit upper-range threshold; browser uses default coloring based on value and optimum alone.

<!-- Full meter with all range attributes -->
<meter
  value="75"
  min="0"
  max="100"
  low="60"
  high="90"
  optimum="40">75%</meter>

<!-- JavaScript: change high threshold -->
<script>
  var meter = document.getElementById("capacity");
  meter.high = 250;   // number property
</script>

Applicable Elements

high vs max vs low vs optimum on <meter>

high on <meter> vs max on <input>

Examples Gallery

Disk usage meter with warning threshold, capacity gauge, and dynamic high updates with JavaScript.

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  value="75"
  min="0"
  max="100"
  low="60"
  high="90"
  optimum="40">75%</meter>

<label for="capacity">Storage used (GB):</label>
<meter
  id="capacity"
  value="120"
  min="0"
  max="200"
  high="180">120/200 GB</meter>

<label for="score">Test score:</label>
<meter id="score" value="85" min="0" max="100" high="70">85</meter>
<button type="button" id="raiseHigh">Raise high to 90</button>

<script>
  document.getElementById("raiseHigh").addEventListener("click", function () {
    var meter = document.getElementById("score");
    meter.high = 90;
  });
</script>

♿ Accessibility

• Label every meter with visible text — Use <label for="id"> paired with the meter’s id, or wrap the meter in a labeled container so users know what the gauge measures.
• Include fallback text inside <meter> — Browsers that do not support <meter> show the inner text (e.g. 75%) instead of a blank element.
• Do not rely on color alone — Supplement meter color regions with visible numeric values or descriptive labels so color-blind users understand the reading.
• Announce changes when updating dynamically — If JavaScript changes value or high, consider an aria-live region for screen reader updates.
• Use <meter> for gauges, <progress> for completion — Picking the correct element gives assistive technology the right semantics.
• Keep scale attributes consistent — Ensure min, max, low, and high use the same units as value so readings make sense when spoken aloud.

💡 Best Practices