References

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

The HTML low attribute

Attribute All modern browsers Updated
Quick answer

The HTML low attribute sets the value below which the measurement is considered "low". It is used on the <meter> element.

Overview

The low attribute sets the low 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="20"></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="20"></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 low attribute do?
Sets the low 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 low attribute?
It is an element-specific attribute, used on the <meter> element.
loop max