HTML <meter> Tag

The HTML <meter> tag is used to represent a scalar measurement within a known range or a fractional value. It is commonly used to display values such as disk usage, battery level, or progress in a task where the range of the value is predefined.

HTML <meter> Tag

The <meter> tag provides a visual representation of the value and can include additional information such as the minimum, maximum, and optimum range for the measurement.

Basic Syntax of HTML <meter> Tag

The basic structure of the <meter> tag is:

</>
Copy
<meter value="current" min="minimum" max="maximum">Fallback Text</meter>

The value attribute specifies the current measurement, and the min and max attributes define the range.

Attributes of HTML <meter> Tag

  • value: Specifies the current value of the measurement.
  • min: Defines the minimum value of the range (default is 0).
  • max: Defines the maximum value of the range (default is 1).
  • low: Indicates the lower bound of the “low” range, where the value is considered below average.
  • high: Indicates the upper bound of the “high” range, where the value is considered above average.
  • optimum: Specifies the optimal value or range for the measurement.
  • Global Attributes: Supports all global attributes like id, class, and style.

Basic Example of HTML <meter> Tag

Here’s a simple example of a meter displaying disk usage:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Disk Usage</h2>
        <p>Disk space used: <meter value="70" min="0" max="100">70%</meter></p>
    </body>
</html>
Basic Example of HTML <meter> Tag

Explanation: The meter shows 70% of the disk space is used within a range of 0 to 100.

Example with Low, High, and Optimum Values

The low, high, and optimum attributes can provide additional context for the value:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Battery Level</h2>
        <p>Battery status: <meter value="50" min="0" max="100" low="20" high="80" optimum="100">50%</meter></p>
    </body>
</html>
Example with Low, High, and Optimum Values

Explanation: The battery level is currently at 50%. Values below 20% are considered low, and values above 80% are high, while 100% is optimal.

Styling the <meter> Tag with CSS

You can customize the appearance of the meter using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            meter {
                width: 100%;
                height: 20px;
                border: 1px solid #ccc;
                background: #f9f9f9;
            }
        </style>
    </head>
    <body>
        <h2>Progress Status</h2>
        <p>Task progress: <meter value="45" min="0" max="100">45%</meter></p>
    </body>
</html>
Styling the <meter> Tag with CSS

Result: The meter appears styled with a custom size, border, and background color, improving its visual appeal.

Practical Applications of the <meter> Tag

  • Progress Tracking: Show progress for tasks, downloads, or achievements within a predefined range.
  • Resource Monitoring: Indicate disk usage, memory consumption, or network speed.
  • Performance Metrics: Represent benchmarks or scores visually.
  • Battery Indicators: Display battery level for devices or applications.