Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML5 provides a new element for displaying static value in a range. The meter element is currently supported by the Google Chrome browser and will soon also be supported by Safari 6.0, when that comes out within the next few weeks as I've recorded this. Let's go ahead and make a working copy of meter.html, and we'll open this in our text editor. And you can see normal, HTML document, and it has a few of these meter elements in it. And I've gone ahead and filled in all the attributes on those, but these first couple are very, very simple.
You can do it with just a value, or you can have minimum or maximum or give it a range in a value. And I'm going to show you what these look like in the browser. I'm going to go ahead and open it in Google Chrome, and there is the first two. Notice we have 2 out of 10, right. So it's got a minimum of 0, a maximum of 10, and the value of 2, and so the meter is actually just 20% filled up. The next one says .6, so that's 60%. And then these here, these are the ones with a value. They have minimum of 0, maximum of 100.
They're all the same. Low of 10, high of 80, optimum of 47. And I've styled them to be 400 pixels wide, so this is kind of how you'll normally do this. And they have these values, and I've displayed the values in text after so you can see what they are. 9 is less than that low value, so you see it comes up amber. 32, 47, and 80 are all within that range of 10 to 80, which is the low and high. You notice that 47 is optimum, and that attribute is not really changing the display here in Google Chrome. And then these other ones are outside of the range. You have 81, which is higher than 80, so it shows up amber, and then 100, 101, 110, those all show up the same, and they're really out of bound altogether.
Well, 100 is the maximum value, but the other ones are higher than the maximum, and so those are all showing up as amber. I wanted to also show you what this looks like in Firefox, which does not support this particular feature, and you notice that it just shows the text. 2 out of 10, 60%, this is the text that is inside of the container. This is the content of the meter element. 2 out of 10, 60 and then if we scroll over here, we have 9 of 100, 32 of 100 like that. And so these are all just displaying what's inside of the element.
Most browsers will display what's inside of an element, even if that element is not supported by the browser. So they won't do the function that that element is designed to do, but they'll show you the text as like an alternative text. And so by putting values inside of that, you're basically giving alternative content to browsers that don't support the feature. The use of the meter element is not recommended for a progress meter; there's a progress element provided for that purpose, and we'll discuss that in the next movie.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99862 Viewers
56 Video lessons · 112986 Viewers
71 Video lessons · 81818 Viewers
131 Video lessons · 39262 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.