Chapter 1. HTML5: from documents to applications
Figure 1.1. Examples of some of the new form input widgets introduced in HTML5. Note that not all browsers provide support for widgets yet.
Figure 1.2. You can use the new placeholder attribute to provide a piece of text that should be displayed in a field when it’s empty. This text is typically gray and will be removed when you populate the field with a value.
Figure 1.3. The left-hand progress bar is an example of a determinate progress bar. In this example, the value of the bar is set to 50 percent, and the appearance of the bar reflects this because it’s half filled. The right-hand progress bar is an indeterminate bar and doesn’t have a value. It displays an animated full bar to indicate that something’s happening, but the percentage complete isn’t known.
Figure 1.4. A screenshot of the states in which you can represent a <meter> element: empty, low, medium, high, and full.
Figure 1.5. An example of the <details> and <summary> elements in action, first in the closed state, where only the code inside the <summary> element is visible, and second in the open state, where the entire contents of the <details> element are visible.
Figure 1.6. Google reads microdata from HTML documents to provide improved search results to users. By using microdata in your pages, you enable Google to provide similar search result listings for your website or application.