HTML Meter Tag Explained

HTML Meter Tag is a new type of HTML tag introduced in the HTML 5 specification. So chances are, you are not so familiar with it. Right? But do not worry, as we will start exploring everything there is to the HTML meter tag in this article. So you will soon be able to start using it in your websites and web apps.

Sounds good? Great! Then let us get started!

What Is An HTML Meter Tag?

So consider this situation. You are creating a dashboard in your web app that, among many other things, also shows the storage space left in your hard disk. Now how will you go about designing it?

So the chances are, you might create a custom HTML element that is styled using its CSS properties to display the storage space graphically. But even if it seems a valid solution, problem is you need to keep creating such custom HTML elements frequently. And if you are designing a web app having a dashboard showing multiple data, these custom elements will only increase. Right?

HTML5 Meter tag explained with example
HTML5 Meter tag explained

So then what is an easier solution for this problem than that? Well for one, would it not be easier if we had a built in HTML element to display such measurements? With the growing number of web apps with dashboards, having such a prebuilt HTML element makes sense, right?

Well, that is precisely what the HTML5 specification guys decided to do! And that is how the HTML Meter tag came into picture!

So What Does The Meter Tag Do?

The idea was to create an HTML element that can be used to display any measured values within it. So that is what a Meter tag does!

A Meter tag can be used to display a measured value within a given range of values.

Sounds good? Great! Then let us move on to take a look at an example piece of code that uses the Meter tag. Shall we?

HTML Meter Tag Example

So for this example, let us assume that we want to display the size of a cloud storage space. For brevity, let us say we want to display the size of our mail box which is currently at 66% full. Alright?

So how do we go about using the Meter tag to display this value? And how will the displayed result look like?

To answer these questions, let us start writing our code as shown below:

<!DOCTYLE html>

    <label for="disk">Disk Usage: </label>
    <meter id="disk" value="0.7">70%</meter>

Now, if you copy the above piece of coded into a new file and save it as meter.html, what do you see?

Go ahead and try it out! I want you to do it yourself so that you become familiar with how to use the HTML meter tags.

Did you try it? If you did, you should see that the result looks something like this:



So that is it! That is how the Meter tag works! You just feed the right value into the “value” property of the Meter tag and it will display the meter gauge accordingly. Go ahead and test it out with few more different values and see how the gauge changes yourself.

Finally, if you have any questions or suggestions, let me know in the comment below! So until next time, take care!