Programming HTML5 Applications

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, ...