References

Beginner-friendly references for web development, with live, editable examples.

The HTML high attribute

Attribute All modern browsers Updated
Quick answer

The HTML high attribute sets the value at and above which the measurement is considered "high". It is used on the <meter> element.

Overview

The high attribute sets the high boundary of a meter. It is used on the <meter> element.

It defines the range and thresholds of a <meter> gauge, letting the browser color it to signal whether the value is in a good, fair or poor range.

Syntax

<meter min="0" max="100" low="30" high="70" value="85"></meter>

Values

Value
A number within the meter's range.

Example

Live example 
<meter min="0" max="100" low="30" high="70" optimum="90" value="85"></meter>

Best practices

  • Set the min, max and current value to define the gauge.
  • Use low, high and optimum so the browser colors the gauge meaningfully.
  • Use a <meter> for a measurement, not task progress. For that, use <progress>.
  • Provide a visible text label so the value is conveyed in words too.

Frequently asked questions

What does the high attribute do?
Sets the high boundary of a meter.
How do the low, high and optimum attributes work?
They split the range into segments so the browser can color the gauge, for example green in the optimum zone and red when poor.
What is the difference between meter and progress?
<meter> shows a measurement within a range; <progress> shows how far along a task is.
Which elements use the high attribute?
It is an element-specific attribute, used on the <meter> element.
height href