In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the
<figcaption> elements. Let’s explore!
<figure> element is intended to be used in conjunction with the
<figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced 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.
<figcaption> element has been the subject of much debate. The spec initially wanted to repurpose
<legend> rather than introduce a new element. Other suggestions included
<p> or the
<legend> was changed, so we then used a combination of
<figure> at Jeremy’s suggestion. Most of these suggestions failed since there was no backwards compatibility for styling with CSS.
Regular readers will know that a new element was recently introduced, namely
<figcaption>. Who knows if it’ll stick, but for now here’s what the spec says about
The figcaption element represents a caption or legend for a figure.
<figcaption> element is optional and can appear before or after the content within the
<figure>. Only one
<figcaption> element may be nested within a
<figure>, although the
<figure> element itself may contain multiple other child elements (e.g.,
So we’ve seen what the spec says about these elements. How do we use them? Let’s look at some examples.
Figure with an image
An image within a
<figure> element without a caption:
Here’s the code for that:
<figure> <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope"> </figure>
Figure with an image and caption
An image within a
<figure> element with an explanatory caption:
and the code that we used:
<figure> <img src="/macaque.jpg" alt="Macaque in the trees"> <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption> </figure>
A figure with multiple images
Nesting multiple images within one
<figure> element with a single caption:
<figure> <img src="/kookaburra.jpg" alt="Kooaburra"> <img src="/pelican.jpg" alt="Pelican stood on the beach"> <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet"> <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption> </figure>
Figure with a code block
<figure> element may also be used for code examples:
Here’s the code for that:
<figure> <blockquote><p><code><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small></code></p></blockquote> <figcaption>Using <code><small></code> around a <a href="http://creativecommons.org/choose/" title="Choose a License">Creative Commons license</a> link with <code>rel="license"</code></figcaption> </figure>
<aside> in an earlier article, but it is important to note the difference between the two. You should choose between
<figure> by asking yourself if the content is essential to understanding the section:
- If the content is simply related and not essential, use
- If the content is essential but its position in the flow of content isn’t important, use
Having said that, if its position relates to previous and subsequent content, use a more appropriate element — e.g., a
<div>, a plain old
<blockquote>, or possibly even
<canvas>, depending on its content.
Don’t stop there!
No need to constrain your
<figure>s to images and code examples. Other content suitable for use in
<figure> includes audio, video, charts (perhaps using
<svg>), poems, or tables of statistics.
It may not always be appropriate to use the
<figure> element, though. For example, a graphic banner should not be marked up with
<figure>. Instead, simply use the
As we’ve illustrated in this article, there are a lot of possibilities for the
<figure> element. Just remember to make sure it’s the most appropriate element for the job. But you already do that for all your markup, right? :)