YouTip LogoYouTip

Att Meter High

## HTML `high` Attribute The `high` attribute of the `` tag is used to define the boundary above which a value is considered "high". It acts as a threshold that helps browsers visually indicate when a measured value has entered a high range. --- ## Browser Support The `high` attribute is widely supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Safari * Microsoft Edge * Opera *Note: Internet Explorer does not support the `` element or its attributes.* --- ## Definition and Usage The `` element represents a scalar measurement within a known range, or a fractional value (such as disk usage or query results relevance). The `high` attribute specifies the lower bound of the "high" range of the gauge. For the `high` attribute to function correctly and semantically, its value must conform to the following rules: * It must be less than the `max` attribute value. * It must be greater than the `low` attribute value (if specified). * It must be greater than the `min` attribute value. ### Visual Behavior When the current `value` of the meter exceeds the `high` threshold, the browser will often change the color of the meter bar (e.g., from green to yellow or red) to visually warn the user that the value has reached a high level. The exact color scheme depends on the browser's default user-agent stylesheet and how the `optimum` attribute is configured. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *number* | A floating-point number that defines the threshold for what is considered a "high" value. | --- ## Code Examples ### Example 1: A Basic Meter with High and Low Thresholds In this example, we define a gauge with a range of 0 to 100. The "high" threshold is set to 90. Since the current value is 95 (which is greater than 90), the browser will render this as a high-range value. ```html ``` ### Example 2: Understanding the `optimum` Attribute with `high` The visual color of the meter changes depending on where the `optimum` (preferred) value lies relative to your `low` and `high` thresholds. ```html ``` --- ## Technical Considerations 1. **Difference between `` and ``**: Do not use the `` element (or the `high` attribute) to represent progress bars (e.g., download progress). Use the `` element for tasks under progress, and `` for static measurements within a known range. 2. **Accessibility**: Always pair your `` element with a `
← Att Meter LowAtt Meter Form β†’