meter tag in HTML


Sure! The `<meter>` tag is an HTML5 element that allows you to create a graphical representation of a value within a known range. It is often used to display data in a way that is visually appealing and easy to understand. In this tutorial, we will cover the basics of how to use the `<meter>` tag.


The basic syntax of the `<meter>` tag is as follows:

<meter value=”value” min=”minValue” max=”maxValue”>text</meter>

Here is a breakdown of what each attribute does:

– `value`: The current value of the meter. This must be a number within the range defined by the `min` and `max` attributes.
– `min`: The minimum value of the meter. This must be a number that is less than the `max` attribute value.
– `max`: The maximum value of the meter. This must be a number that is greater than the `min` attribute value.
– `text` (optional): The text to display inside the meter. This is often used to provide context for the meter’s value.


Here is an example of how to use the `<meter>` tag:

Also Read:  optgroup Tag in HTML

<meter value=”75″ min=”0″ max=”100″>75%</meter>

This would create a meter that shows a value of 75, with a minimum value of 0 and a maximum value of 100. The text “75%” would be displayed inside the meter.


You can also style the `<meter>` tag using CSS. Here are a few examples:

/* Change the color of the meter to red */
meter {
appearance: none;
height: 20px;
width: 200px;
background-color: #ddd;
border-radius: 5px;

meter::-webkit-meter-bar {
background-color: #f00;
border-radius: 5px;

meter::-webkit-meter-optimum-value {
background-color: #0f0;
border-radius: 5px;

This CSS would change the appearance of the meter to have a red fill color and a green “optimum” range. You can experiment with different CSS styles to create a custom look for your meter.


The `<meter>` tag is a simple yet powerful way to display data in a graphical format. By setting the `min`, `max`, and `value` attributes, you can create a meter that accurately reflects your data. And by using CSS, you can style the meter to match the look and feel of your website or application. I hope this tutorial has been helpful!

Previous articlemeta Tag in HTML
Next articlenav tag in HTML
Namaskaar, Friends main Kapil ka Founder hu. Mere kai English blog bhi hai ,par mera motive yahan par easy language mein Technology se related Gyan ko aap tak pahunchane ka hai .taki aap kuch naya shikh sake. meri koshish hai ki bilkul simple tarike se aap ko nyi updates deta rahu taki aap bhi technology ke is yug mein peeche na rahe aur shikte rahe.Mujhse judne ke liye app mujhe Social Media par follow kar sakte hai.

Leave a Reply