HTML low Attribute

HTML low Attribute

The HTML low attribute defines the upper boundary of the range considered low on a <meter> element. It works with the meter's other numeric attributes to divide a known range into low, medium, and high regions.

Elements That Use the low Attribute

The low attribute is used only with the <meter> element.

low Value

The value of the low attribute must be a valid floating-point number. It identifies the upper boundary of the meter's low range.

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

In this example, the meter has a range from 0 to 100, and low="30" establishes the upper boundary of the low portion of that range.

How low Works

The low attribute does not set the meter's current value. Instead, it helps divide the meter's overall range into regions that can be interpreted as low, medium, and high.

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

These meters use the same range boundaries but have different current values. Browsers may use different visual appearances to indicate where each value falls within the defined ranges.

Related <meter> Attributes

The low attribute works with several other attributes that define the meaning of a <meter>.

The effective low value cannot be below the minimum or above the maximum, and it cannot be greater than the effective high value.

low and optimum

The low, high, and optimum attributes work together to describe which parts of a meter's range are preferable. The location of the optimum value tells the browser whether lower, middle, or higher values should be considered better.

<meter min="0" low="30" high="70" max="100" optimum="90" value="25">25%</meter>

Here, the optimum value is above the high boundary, indicating that higher values are preferable. Browsers may reflect this relationship in the meter's appearance.

Common Mistakes

Do not confuse low with min. The min attribute defines the lower bound of the entire range, while low defines the upper boundary of the portion considered low.

Do not use low to specify the current measurement. The current measurement is provided by the value attribute.

Keep the meter's range values in a logical order. The effective values follow the relationship min ≤ low ≤ high ≤ max.

Do not use <meter> to represent the progress of a task. Use the <progress> element for task progress.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The low attribute on the <meter> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the low Attribute

The example uses three meters with the same min, low, high, max, and optimum values but different current values. Compare how the browser displays measurements in different parts of the range.

Summary

The HTML low attribute is used with the <meter> element to define the upper boundary of the range considered low. Together with min, high, max, optimum, and value, it helps describe how a measurement relates to a known range.