Lesson 1: Thinking HTML5 semantics CHAPTER 5 219Working with figures
A figure is a unit of content that might have a caption and is referenced from the main docu-
ment. Use the <figure> element to denote a figure that can be one or more photos, one or
more drawings, one or more illustrations, or other content that is referred to as a unit. Use the
<figcaption> element to denote an optional caption.
When using the <figure> element, remember that the figure is related to the main content
of the page, and the figure’s location is not important. This is different from the <aside> ele-
ment, which is more related to the site than to the page’s document. If placement is impor-
tant, don’t use the <figure> element; use the <div> element.
The following example shows the use of the <figure> and <figcaption> elements (bolded)
to display an image that is referred to in the main document of the webpage.
<div role="main">
<p>
The peanut butter and jelly
<abbr title="peanut butter and jelly">PB&J</abbr>
sandwich has been a staple food of many families
due to its health benefits, its cost, and its
wonderful flavor.
</p>
<p>
When assembling a peanut butter and jelly sandwich,
you need to gather all the required materials as
shown in <a href="#figure1">Figure 1</a>.
</p>
<figure id="figure1">
<img src="/pbj.jpg" alt="peanut butter and jelly requirements" />
<figcaption>Figure 1 The PB&J sandwich requirements.</figcaption>
</figure>
</div>Working with the <summary> and <details> elements
Use the <details> element with the <summary> element to create collapsible details content
under the summary. The <details> and <summary> elements currently work with the Google
Chrome browser only, but more support is expected.
In the <details> element, nest a <summary> element that contains the content that will
always be displayed. The details content is placed inside the <details> element following the
<summary> element. When the page is rendered, only the content of the <summary> ele-
ment is displayed. Clicking the summary content causes the details content to be displayed.
Clicking again causes the details content to be hidden.
<div role="main">
<details>
<summary>Make a peanut butter and jelly sandwich</summary>
<p>
The peanut butter and jelly
<abbr title="peanut butter and jelly">PB&J</abbr>Key
Te rms