HTML and CSS Reference
In-Depth Information
Contain the illustration image with the figure element, and include the caption text
within figcaption :
<img src="chart.png" alt="Chart of increasing awesomeness" />
<figcaption>The increasing amount of awesome that this blog
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.
Why so many different types of content? Because the spec defines figure ( http://www ) 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
quite similar to that for aside ( ) . To
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
HTML5 Doctor's “Simplequiz #4” on figures, captions, and alt text at http://html5doc .
1.16 Marking Up Dates and Times
You want to encode date-time content for machines, but still retain human readability.
Search WWH ::

Custom Search