| Tip 2 | Showing Progress toward a Goal with the <meter> 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, ...
Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
