HTML Tag: <meter> - ReadmeGen

Overview

<meter> tag creates a gauge that indicates the progress of a task or the value of a measure. It provides a visual representation of a range of values, with a current value marked as a pointer.

Usage

To use <meter> tag, define the min and max attributes to set the range of values and the value attribute to indicate the current value.

Attributes

min: Sets the minimum value of the range.
max: Sets the maximum value of the range.
value: Indicates the current value within the range.
low: Defines the threshold for a low value.
high: Defines the threshold for a high value.
optimum: Defines the ideal value within the range.

Examples

Basic Meter:

<meter value="50" min="0" max="100"></meter>

With Thresholds:

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

With Ideal Value:

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

Exploring the <meter> Tag

<!DOCTYPE html>
<html>
<head>
  <title>Meter Tag Example</title>
</head>
<body>
  <h2>Progress Meter</h2>
  <meter value="60" min="0" max="100"></meter>

  <h2>Value Meter</h2>
  <meter value="50" min="0" max="100" low="25" high="75" optimum="60"></meter>
</body>
</html>