HTML high Attribute

HTML high Attribute

The HTML high attribute defines the lower boundary of the high range for a <meter> element. It works with the meter's minimum, maximum, low, optimum, and current values to describe where a measurement falls within a known range.

Syntax

The high attribute is added to a <meter> element with a numeric value that identifies the beginning of the high range.

<meter min="0" max="100" low="40" high="80" value="75">75%</meter>

In this example, the high range begins at 80 on a scale from 0 to 100.

Attribute Value

The high attribute accepts a valid floating-point number. Its value must be within the range established by the min and max attributes and must not be lower than the low value when low is specified.

If high is omitted, its effective value is the meter's maximum value. If a specified high value is greater than the maximum, its effective value is limited to the maximum.

Elements That Use the high Attribute

The high attribute is supported by the <meter> element.

The high attribute does not apply to <progress>, <input>, or other HTML elements.

Using the high Attribute

A meter can divide its measurement range into low, middle, and high portions. The high attribute identifies where the high portion begins.

<label for="storage">Storage used:</label>
<meter id="storage"
  min="0"
  max="100"
  low="50"
  high="80"
  value="85">85%</meter>

Here, the meter represents a value of 85 on a scale from 0 to 100. The high="80" value establishes 80 as the lower boundary of the high range.

The browser may use the range information when determining how the meter is visually presented. The exact appearance can vary between browsers and operating systems.

Understanding the Meter Range

The high attribute works with several other <meter> attributes to describe the measurement and its ranges.

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

When both low and high are specified, the effective range follows the order min ≤ low ≤ high ≤ max.

Using high with optimum

The optimum attribute indicates which part of the meter's range is considered preferable. When it is combined with low and high, the browser can distinguish measurements according to their relationship to the preferred range.

<label for="disk">Disk usage:</label>
<meter id="disk"
  min="0"
  max="100"
  low="50"
  high="80"
  optimum="20"
  value="90">90%</meter>

Because the optimum value is below the low boundary in this example, lower measurements are considered preferable. A value of 90 falls within the high portion of the scale and is farther from the preferred range.

The visual colors used to represent these states are determined by the browser and should not be relied upon as the only way to communicate the meaning of the measurement.

Common Mistakes

Do not use high as the maximum value of the meter. The max attribute defines the upper boundary of the complete measurement range, while high identifies where the high portion of that range begins.

<meter min="0" max="100" high="80" value="90">90%</meter>

Do not specify a high value below the meter's low value or above its max value.

<!-- Incorrect range order -->
<meter min="0" low="60" high="40" max="100" value="70">70%</meter>

<!-- Correct range order -->
<meter min="0" low="40" high="60" max="100" value="70">70%</meter>

Do not use <meter> to represent the completion of a task. Use the <progress> element for progress indicators and <meter> for measurements within a known range.

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 high 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 high Attribute

The example uses min, low, high, max, optimum, and value to describe a storage measurement. Change the value or high attribute in the editor to see how the meter responds.

Summary

The HTML high attribute defines the lower boundary of the high range on a <meter> element. It accepts a numeric value and works with min, low, max, optimum, and value to describe a measurement within a known range. The high attribute does not define the meter's maximum value; that is the purpose of the max attribute.