Lesson 10

Dynamic Elements

This lesson is based around four additional features added in HTML5 that provide dynamic components: a native progress bar, a meter element, a range control, and a set of tags that allow the user to expand a summary to view its details.

These differ from many other tags you have examined because browser support is not consistent. Therefore, you will also look at a concept called polyfills that enables you to upgrade the functionality of a browser when a feature is missing.

Summary and Details Tags

One of the most frequent pieces of JavaScript I find myself writing is code to show extra information to a user when he or she chooses based on a summary.

Because this is such common functionality, the HTML5 specification defines two tags that combine to provide native support for this functionality. In order to see this in action, create the following web page:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="utf-8">
    </head>
    <body>
        <header>This page provides an example of the summary and details tags</header>
        <details>
            <summary>Table of contents</summary>
            <ul><li>Lesson 1</li>
            <li>Lesson 2</li>
            <li>Lesson 3</li>
            <li>Lesson 4</li>
            <li>Lesson 5</li></ul>
        </details>
    </body>
</html>

This page includes a tag called details, which then has a child element called summary. In addition, the details tag itself contains additional information: an unordered list in this case. If you open this in Chrome, it will display as you see in Figure 10.1.

Figure 10.1 ...

Get HTML5, JavaScript, and jQuery 24-Hour Trainer 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