Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Define a scalar measurement within a known range in HTML
To define a scalar measurement within a known range or a fractional value, we use the <meter> tag in HTML. The <meter> tag represents a gauge that displays a value within a specific range, commonly used for disk usage, quiz scores, battery levels, or relevance of query results.
The <meter> tag is not used to indicate progress bars. If you want to show progress or completion, use the <progress> tag instead. For best accessibility, it's recommended to use a <label> tag or provide fallback text between the opening and closing <meter> tags.
Syntax
Following is the syntax for the <meter> tag −
<meter value="current" min="minimum" max="maximum">Fallback text</meter>
The basic syntax with common attributes −
<meter value="6" min="0" max="10" low="3" high="8" optimum="7">6 out of 10</meter>
Basic Example
Following example demonstrates how to define a scalar measurement using the <meter> tag −
<!DOCTYPE html> <html> <head> <title>HTML meter Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Score Measurement</h2> <label for="score">Test Score:</label> <meter id="score" value="6" min="0" max="10">6 out of 10</meter> <h2>Storage Usage</h2> <label for="storage">Disk Usage:</label> <meter id="storage" value="75" min="0" max="100">75%</meter> </body> </html>
The output shows two gauges representing different measurements −
Test Score: [====60%====] Disk Usage: [=======75%=======]
Attributes of the <meter> Tag
The <meter> tag supports the following specific attributes −
| Attribute | Value Type | Description |
|---|---|---|
| value | number (required) | Specifies the current value of the gauge |
| min | number | Specifies the minimum value of the range (default: 0) |
| max | number | Specifies the maximum value of the range (default: 1) |
| low | number | Specifies the range considered as low value |
| high | number | Specifies the range considered as high value |
| optimum | number | Specifies the optimal value for the gauge |
| form | form_id | Specifies which form the meter element belongs to |
Using Different Attribute Values
Following example demonstrates various meter configurations with different attribute combinations −
<!DOCTYPE html> <html> <head> <title>Meter Attributes Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2 style="color: blue;">TutorialsPoint - Meter Examples</h2> <p><b>Basic meter (value in normal range):</b></p> <meter value="5" min="0" max="15" low="1" high="10">5 out of 15</meter> <p><b>Meter with decimal value:</b></p> <meter value="0.8" min="0" max="1">80%</meter> <p><b>Value below low threshold (appears red/orange):</b></p> <meter value="1" min="0" max="15" low="3" high="9">1 out of 15</meter> <p><b>Value above high threshold (appears yellow/orange):</b></p> <meter value="10" min="0" max="10" low="3" high="9">10 out of 10</meter> </body> </html>
Different browsers may display different colors based on the value's position relative to the low and high thresholds.
Attribute Value Constraints
The <meter> tag attributes must follow these mathematical relationships −
min ? value ? maxmin ? low ? max(if low is specified)min ? high ? max(if high is specified)min ? optimum ? max(if optimum is specified)low ? high(if both low and high are specified)
Comprehensive Example with All Attributes
Following example shows various meter states and attribute combinations −
<!DOCTYPE html> <html> <head> <title>Complete Meter Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;"> <h2>Meter Tag Demonstrations</h2> <p><b>Meter without attributes (uses defaults 0-1):</b></p> <meter>Empty meter</meter> <br/><br/> <p><b>Meter with only value (default range 0-1):</b></p> <meter value="0.5">50%</meter> <br/><br/> <p><b>Meter with custom min-max range:</b></p> <meter min="0" max="100" value="15">15 out of 100</meter> <br/><br/> <p><b>Low value (min ? value < low):</b></p> <meter min="0" max="100" value="15" low="30" high="85">15 - Low</meter> <br/><br/> <p><b>High value (high < value ? max):</b></p> <meter min="0" max="100" value="90" low="30" high="85">90 - High</meter> <br/><br/> <p><b>Normal value (low ? value ? high):</b></p> <meter min="0" max="100" value="50" low="30" high="85">50 - Normal</meter> <br/><br/> <p><b>With optimum in high range:</b></p> <meter min="0" max="100" value="24" low="30" high="85" optimum="80">24 with high optimum</meter> <br/><br/> <p><b>With optimum in low range:</b></p> <meter min="0" max="100" value="80" low="30" high="85" optimum="20">80 with low optimum</meter> </body> </html>
The visual appearance of the meter changes based on whether the current value is in the low, normal, or high range, and how it relates to the optimum value.
Real-World Use Cases
The <meter> tag is commonly used in these scenarios −
System metrics − CPU usage, memory usage, disk space
Scoring systems − Test scores, ratings, performance indicators
Completion levels − File downloads, form completion (though
<progress>is preferred for active processes)Statistical displays − Survey results, poll percentages
Conclusion
The HTML <meter> tag provides a semantic way to represent scalar measurements within defined ranges. Use the value attribute for the current measurement and min/max to set boundaries. The low, high, and optimum attributes help browsers apply appropriate visual styling to indicate whether values are in desirable ranges.
401 Views
