Chapter 10. New Tags

In addition to a lot of new interfaces for working with data, HTML5 also introduces a number of new HTML tags that can be used in a web page to enhance the application developer’s ability to put out a quality application.

Tags for Applications

A common task in any application is to give the user feedback on how far along a long-running task is. This lets the user know that her task is moving and that something didn’t freeze up. It is possible to show a progress meter by using a few <div> elements and some custom CSS, but HTML5 standardizes the procedure and appearance through a new <progress> tag. As of this writing, the tag is supported in Firefox and Chrome. It offers two attributes to make it easy to visualize progress to the user: value to show the current value of the progress bar and max to show the maximum value.

In order to show a progress indication to users of legacy browsers, it is recommended that you include some form of text inside a <span> element inside the progress bar.

Example 10-1 shows the code for a progress bar at 20% completion. Example 6-4 shows how JavaScript can update the attributes as events in the program indicate progress. The progress bar can also be styled with CSS like any other HTML element.

Example 10-1. Progress indicator

<!DOCTYPE html>
<html>
  <head>
    <title>Progress</title>
  </head>
  <body>
    <progress value="20" max="100">
      <span>running</span>
    </progress>
  </body>
</html>

If the <progress> element can be used to show a running event, ...

Get Programming HTML5 Applications 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.

Start your free trial