Tip 2
Showing Progress toward a Goal with the Element
AwesomeCo is holding a charity fundraiser in a few months and looking to
get $5000 donated by the general public. Because AwesomeCo is such an
awesome company, it’s planning to kick in an additional $5000 if people
pledge enough support to hit the original $5000 goal. AwesomeCo wants to
display a progress meter on one of its pages. When we’re done, we’ll have
something that looks like the following figure.While we can certainly achieve that with some <div> tags styled with CSS, we
can also use the new <meter> tag, which is designed specifically for this task.The <meter> tag helps you semantically describe an actual meter. In order for
your meter to be in harmony with the specification, you shouldn’t use your
meter for things with arbitrary minimum or maximum values, like height and
weight. However, you could use <meter> for temperature if you treated it like
a thermometer, where you would set low and high values.In our case, we want to show how close we are to our goal of $5000. We have
a minimum and a maximum value, so it’s a perfect fit for us.Figure 3—A meter to show progress toward our goal
Let’s build a quick prototype by creating a new HTML5 document. We’ll rep-
resent our meter with this code, hard-coding 2500.00 as our current value to
demonstrate how it works right now.html5_meter/index.html
<h3>Our FundraisingGoal</h3>
<metertitle="USD"id="pledge_goal"
value="2500.00"min="0"max="5000.00">
</meter>
<p>Helpus reachour goalof $5000!</p>Chapter 2. New Structural Tags and Attributes • 26
Download from Wow! eBook <www.wowebook.com> report erratum • discuss