Description

The figure element represents a piece of self-contained content that's commonly used to enclose images or graphics, charts, reference tables, videos, poems, code snippets, etc. These, may have a legend or caption (figcaption element) that can be used to reference the fragment from somewhere else in the document. Beside the optional caption, a figure element can contain many other elements including images (img), paragraphs (p), computer code (code), cites (cite), etc.

Being self-contained means that the figure has certain degree of independency from the flow of the document, and its position relative to the surrounding content doesn't need to be exact.

Images placed next to blocks of text in newspapers consitute good examples of proper use of the elements figure and figcaption.

When the figure has information only tangentially related to the surrounding contents, the aside element should be used in its place, optionally containing itself a figure.

Examples

The following example shows a figure that contains an image with its caption. This is a typicall representation of an article in a magazine or newspaper, where images usually accompany the text and provide extra information.

In this case, we've chosen not to use the aside element because the information in the image adds to the comprehension of the articles' content. In other words, it has relevance.

<h1>Browser usage analisys</h1>
<figure style="float: right">
  <img src="/assets/images/browser-statistics.png">
  <figcaption>Chart A: Browsers usage</figcaption>
</figure>
<p>In the battle to domain web access, Chrome browser takes the lead with over a 40% of the users. As you can see in chart A, this is almost double the usage of its first competitor, Internet Explorer, which takes the second place with 24%.</p>
<p>Other browsers, not present in this chart, compose the minority and have combined, 14% of the world's desktop users.</p>
<p>In the area of mobile browsers, Android Browser leads the market with a 22.77% of users, followed by Chrome with a 16.67% of the market.</p>

Browser usage analisys

In the battle to domain web access, Chrome browser takes the lead with over a 40% of the users. As you can see in chart A, this is almost double the usage of its first competitor, Internet Explorer, which takes the second place with 24%.

Other browsers, not present in this chart, compose the minority and have combined, 14% of the world's desktop users.

In the area of mobile browsers, Android Browser leads the market with a 22.77% of users, followed by Chrome with a 16.67% of the market.

One important thing to note in the previous example: the in-text reference to the chart is made by its caption (figcaption) instead of using spacial references like "the chart on the right". This provides a degree of independency that will allow authors, and eventually browsers, to relocate the figure according to the needs (for example, for improved displaying of the content in devices with reduced screen sizes).

Our next example shows a piece of a poem that's treated in the surrounding text. Again, the reference is made by the caption (figcaption).

<p>And in the 13<sup>th</sup> stanza we can see how the narrator begins to realize what the bird word really means.</p>
<figure>
  <p>This I sat engaged in guessing, but no syllable expressing<br>
    To the fowl whose fiery eyes now burned into my bosom's core;<br>
    This and more I sat divining, with my head at ease reclining<br>
    On the cushion's velvet lining that the lamp-light gloated o'er,<br>
    But whose velvet violet lining with the lamp-light gloating o'er,<br>
    She shall press, ah, nevermore!
  </p>
  <figcaption><cite>The raven</cite> (13<sup>th</sup> stanza) by Edgar Allan Poe</figcaption>
</figure>

Now, we'll be writing a short biography of Charles Dickens, and we'll accompany our text with his portrait. Although we could be tempted to use aside because of the lesser relevance between figure and the content, particularly in contrast with the previous two examples, where the figure is being referenced from the text. Nevertheless, the image depicts the particular topic the text is about and this constitutes a good reason to use the figure element alone.

<h1>Charles Dickens</h1>
<figure style="float: right">
  <img src="/assets/images/charles-dickens.jpg">
</figure>
<p>Charles John Huffam Dickens was an English writer and social critic. He created some of the world's most memorable fictional characters and is generally regarded as the greatest novelist of the Victorian period. During his life, his works enjoyed unprecedented fame, and by the twentieth century his literary genius was broadly acknowledged by critics and scholars. His novels and short stories continue to be widely popular.</p>

Charles Dickens

Charles John Huffam Dickens was an English writer and social critic. He created some of the world's most memorable fictional characters and is generally regarded as the greatest novelist of the Victorian period. During his life, his works enjoyed unprecedented fame, and by the twentieth century his literary genius was broadly acknowledged by critics and scholars. His novels and short stories continue to be widely popular.

The previous case also represents a good example where the caption isn't necessary.

And now one last example, to show a particular type of situations where the use of figure would result inconvenient. Here the code snippet is presented in such a way that becomes part of the flow of text. Remember that a figure is supposed to be self-contained and positionally independent from its surroundings.

<p>You must change the file's owner so the program can open it. You can do it executing the command:</p>
<pre><code>sudo chown maras passwords.txt</code></pre>
<p>Once this step has been done...</p>

sudo chown maras passwords.txt

Note that code snippets are good candidates for figure. The only reason that denied the posibility of using it in the previous example was the inclussion of the code in the flow of the content. In other words, if the code snippet is moved elsewhere, the meaning of the content could be broken.

Attributes

Events