HTML and CSS Reference
In-Depth Information
Solution
Contain the illustration image with the
figure
element, and include the caption text
within
figcaption
:
<figure>
<img src="chart.png" alt="Chart of increasing awesomeness" />
<figcaption>The increasing amount of awesome that this blog
demonstrates.</figcaption>
</figure>
Discussion
figure
and
figcaption
are two new elements introduced in HTML5. Though the above
example references an illustration (
img
),
figure
is not restricted to that type of content.
It can be used to specify code examples, photos, charts, audio, and data tables, to name
just a few of the options.
.w3.org/TR/html-markup/figure.html
) rather broadly, as:
a unit of content, optionally with a caption, that is self-contained, that is typically refer-
enced as a single unit from the main flow of the document, and that can be moved away
from the main flow of the document without affecting the document's meaning.
If you've been paying attention, it might've occurred to you that this definition sounds
know which element is most appropriate for your content, consider whether the
content is essential for understanding the surrounding content. If it is not essential,
only related, then use
aside
. Otherwise,
figure
is appropriate.
And keep in mind two things:
•
figcaption
is optional and can reside anywhere within
figure
, whether before or
after the
figure
content.
• Just because this recipe's example uses an image doesn't mean all images need to
be contained by
figure
.
See Also
1.16 Marking Up Dates and Times
Problem
You want to encode date-time content for machines, but still retain human readability.
