4.5.11 The figure element

4.5.11 The figure element

Categories

Flow content.

Sectioning root.

Contexts in which this element can be used:

Where flow content is expected.

Content model:

Either: One figcaption element followed by flow content.

Or: Flow content followed by one figcaption element.

Or: Flow content.

Content attributes:

Global attributes

DOM interface:

Uses HTMLElement.

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, .g. to the side of the page, to dedicated pages, or to an appendix.

The first figcaption element child of the element, if any, represents the caption of the figure element's contents. If there is no child figcaption element, then there is no caption.

This example shows the figure element to mark up a code listing.

<p>In listing 4 we see the primary core interface API declaration.</p>  <figure id="l4"> <figcaption>Listing 4. The primary core interface API declaration.</figcaption> <pre><code>interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence&lt;byte> data); void initSelfDestruct(); }</code></pre>  </figure> <p>The API is designed to use UTF-8.</p>

Here we see a figure element to mark up a photo.

<figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure>

In this example, we see an image that is not a figure, as well as an image and a video that are.

<h2>Malinko's comics</h2>  <p>This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words:  <blockquote>  <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"> </blockquote>  <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit .  <figure> <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."> <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>  </figure>  <figure> <video src="ex-b.mov"></video> <figcaption>Exhibit . The <cite>Rough Copy</cite> trailer.</figcaption>  </figure>  <p>The case was resolved out of court.

Here, a part of a poem is marked up using figure.

<figure>  <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p>  <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure>

In this example, which could be part of a much larger work discussing a castle, the figure has three images in it.

<figure> <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423." alt="The castle has one tower, and a tall wall around it."> <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858." alt="The castle now has two towers and two walls."> <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999." alt="The castle lies in ruins, the original tower all that remains in one piece."> <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>  </figure>

4.5.12 The figcaption element

Categories

None.

Contexts in which this element can be used:

As the first or last child of a figure element.

Content model:

Flow content.

Content attributes:

Global attributes

DOM interface:

Uses HTMLElement.

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element's parent figure element, if any.

Caption test

The figure & figcaption elements

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 <figure> and <figcaption> elements. Let's explore!

The <figure> element

The <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 <figure>:

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.

W3C Specification

The <figcaption> element

The <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 <label>, <caption>, <p> or the <h1>-<h6> elements. <legend> was changed, so we then used a combination of <dt> and <dd> inside <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 <figcaption>:

The figcaption element represents a caption or legend for a figure.

W3C Specification

The <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., <img> or <code>).

Using <figure> and <figcaption>

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:

A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

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 Richard Clark</figcaption></figure>

A figure with multiple images

Nesting multiple images within one <figure> element with a single caption:

Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet.
Originals by Richard Clark

The code:

<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 Richard Clark</figcaption></figure>

Figure with a code block

The <figure> element may also be used for code examples:

<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>

Using <small> around a Creative Commons license link with rel="license"

Here's the code for that:

<figure><blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative Commons Attribution Share-alike license&lt;/a&gt;&lt;/small&gt;</code></p></blockquote><figcaption>Using <code>&lt;small&gt;</code> around a Creative Commons license link with <code>rel="license"</code></figcaption></figure>

Differences between <figure> and <aside>

We covered <aside> in an earlier article, but it is important to note the difference between the two. You should choose between <aside> or <figure> by asking yourself if the content is essential to understanding the section:

• If the content is simply related and not essential, use <aside>.
• If the content is essential but its position in the flow of content isn't important, use <figure>.

Having said that, if its position relates to previous and subsequent content, use a more appropriate element - .g., a <div>, a plain old <img>, a <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 <canvas> or <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 <img> element.

Summary

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?

Related Posts:

• HTML5 Simplequiz #4: figures, captions and alt text
• HTML5 Simplequiz 6: Zeldman's fat footer
• The small & hr elements
• Hello, summary and figcaption elements
• September HTML5 spec changes

Tuesday, April 13th, 2010 by Richard Clark.

Weirdo theme by Dogmeat

• {block:Pages}
• {Label}
• {/block:Pages}

{/block:HasPages} {block:HeaderImage}

{Else}

{Title}

{block:Description}

{Description}

{/block:Description} {/block:HeaderImage}

{block:ShowOrList} {block:Show} ← Back to blog {/block:Show} {/block:ShowOrList} {block:Tag}

Filed under: {Tag}

See »

{block:List}

• {block:Posts}
• {block:PostImage size='180' dimension='width'} {Else} {block:BodyExcerpt strip_tags="true"} {BodyExcerpt} {/block:BodyExcerpt} {/block:PostImage} {Title}
• {/block:Posts}

{/block:List} {block:Show} {block:Posts} {block:Private}

{Body}

{block:ShowOrList} {block:Author} {block:AuthorUser}

by {AuthorName}

{/block:AuthorUser}

• Category

  • {TagName}

• • Tags

  • aside
  • figcaption
  • figure
  • HTML 5
  • html5

{block:Pagination} {block:PreviousPage} ← Previous {/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage} Next → {/block:NextPage} {/block:Pagination}

{OwnerName}

{Profile}

{ProfileExternalLinks}

Get Updates

{block:Subscription}{/block:Subscription}

Subscribe via RSS {block:HasLinks} {block:LinkCategories}

{Label}

• {block:Links}
• {Label}
• {/block:Links}

{/block:LinkCategories} {/block:HasLinks}

{block:TagList}

Tags

• {block:TagListing collapsible="true" count="10" action_id="see_more_tags"} {block:TagListingMore}
• View all {NumTags} tags ↓
• {/block:TagListingMore} {block:TagItem}
• {TagName} ({TagCount})
• {/block:TagItem} {block:TagItemSelected}
• {TagName} ({TagCount})
• {/block:TagItemSelected} {/block:TagListing}

{/block:TagList} {block:HasArchives}

Archive

{block:ArchiveYear}

{ArchiveDateYear} ({ArchiveYearCount})

{block:Archive}

{ArchiveMonth} ({ArchiveCount})

{/block:Archive}

{/block:ArchiveYear}

{/block:HasArchives}

{block:Contributors}

Contributors

• {block:Contributor collapsible="true" count="10" action_id="see_more_contributors"} {block:ContributorMore}
• View all {NumContributors} contributors »
• {/block:ContributorMore}
• {ContributorName}
• Translations
  • Nederlands
  • Français
  • Deutsch
  • 日本語
  -->

  Richard Clark

  This article was written by Richard Clark. Richard is Head of Interactive at KMP Digitata, a digital agency based in Manchester, UK. He runs a host of websites including this one and it's sister site html5gallery. Another side project is Speak the Web, a series of small gig style web conferences. You should follow him on twitter or check out his site.

  {block:FbLike /}

  {/block:Sharing} {block:Responses /} {/block:Posts} {/block:Show}
  {/block:Contributor}

{/block:Contributors}

Weirdopedia says: "Weird" http://weirdopedia.posterous.com/4511-the-figure-element 4.5.11 The figure element Categories Flow content . Sectioning root . Contexts in which this element can be used: Where flow content is expected. Content model: Either: One figcaption element followed by flow content . Or: Flow content followed by one figcaption element. Or: Flow content . Content a ...