What’s New in HTML 5: Inline Semantics continued (Progress)

published by Dan in Web Development | Web Technology | Website Design with No Comments

Progress - The progress element, as the name indicates, is used to indicate the progress or state of a specific process. Everyone is familiar with progress bars and this acts just like it. Of course if the progress value isn’t updated dynamically then it simply serves to represent the progress of a specific process during a specific time frame, which I think defeats the entire purpose of the element. To be able to update the values in the progress bar you will need JavaScript.

The progress element has two attributes: min and max. The max attribute can be left out for processes wherein there is really no max value or the max value isn’t known. When using the the progress element you can opt to show the actual value or a percentage of the value. For example when downloading a file you can write it as

<p>Downloaded: <progress value=”204.57″ min=”0″ max=”700″> 204.57MB </progress></p>

or as

<p>Downloaded: <progress value=”204.57″ min=”0″ max=”700″>28.8%</progress></p>

For processes that do not have maximum values you can simply eliminate the max attribute:

<p>You are visitor number: <progress value=”20457″> 20457 </progress></p>

Of course the example given wasn’t really a process but is simply a hit counter. But you get the point.

Next up: Embedded Media Elements

Source: New Elements in HTML 5 by Prof. E. Harold

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

RSS feed | Trackback URI

Comments »

Trackback responses to this post