HTML <meter> Tag
In this post, we will cover Tag meter with examples. With the aim that it would serve the learning requirements.
The HTML <meter> tag is used to represent a scalar measurement within a known range. It is typically used to display the progress of a task or the level of completion of a form or survey
Data can be measured by the meter element based on a specific range (a gauge):
Example:
Here is an example of the meter tag to show battery:
Example:
Here’s another example of how you could use the meter tag to indicate the number of visitors to a webpage over a certain period of time:
Example:
We can also use the low, high and optimum attributes to indicate the ranges that are considered low, high and optimum. For example:
Example:
Tag Meter Usage
The Tag meter <meter> indicates a scalar measurement within a specified range or a fractional value. Alternatively, this is called a gauge.
The amount of bandwidth a query uses, its relevance to the question, etc.
Here are some common uses of the HTML <meter> tag:
- The <meter> tag can be used to track the progress of a task or process, such as the completion of a survey or the upload of a file. Developers can set the value attribute to update the progress bar in real-time.
- The <meter> tag can be used to display the level of something, such as the remaining battery life on a mobile device or the amount of storage space remaining on a hard drive.
- The <meter> tag can be used to represent a rating or score, such as the user rating for a product or service.
- The <meter> tag can be used to visualize data in a meaningful way, such as the temperature range of a room or the speed of a moving object.
- The <meter> tag can be used to provide feedback to users, such as the strength of a password or the quality of an audio recording.
Attributes
Global
The Tag meter <meter> also functions with the Global Attributes in HTML.
Event
The Event Attributes are also compatible with HTML’s <meter> tag.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| form | form_id | A form identifies which <meter> element relates to. |
| high | number | Define what is intended to be a high value range. |
| low | number | Indicates the range in which a low value is accepted. |
| max | number | Sets the range’s maximum value. |
| min | number | Limit the range to a minimum value. The default value is 0. |
| optimum | number | Shows the gauge’s optimal value. |
| value | number | It is necessary. Indicates the gauge’s current value. |
Browser Compatibility
Table numbers indicate the initial browser version that completely accepts the element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <meter> | 8.0 | 13.0 | 16.0 | 6.0 | 11.5 |
Tag Meter Benefits
Here are some benefits of using the HTML <meter> tag:
- The <meter> tag can provide users with valuable feedback on the progress of a task or the level of completion of a form or survey. This can help to improve the user experience and reduce frustration and confusion.
- The <meter> tag is designed to be accessible to users with disabilities, including screen reader users. By providing a descriptive label for the meter, developers can ensure that it is properly identified and understood by all users.
- The <meter> tag is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. This ensures that it can be used by a wide range of users and devices.
- The <meter> tag can be customized using CSS to match the visual design of the web page or application. This allows developers to create a consistent and cohesive user experience.
- The <meter> tag can be used to visualize data in a meaningful and intuitive way. This can help to communicate complex information more effectively and make it easier for users to understand.
