Description

The figcaption element represents caption or legend in a figure. A figure is a piece of self-contained content that's commonly used to enclose images or graphics, charts, reference tables, videos, poems, code snipets, etc.

The presence of the figcaption element inside a figure is optional, but if present, there must be only one and be placed at the begining or end of the parent figure.

Examples

The first example shows a figure consisting of a truth table that's referenced in the surrounding text. This table has a caption providing a short description of the contents of the element.

<h1>Truth tables</h1>
<figure style="float: right">
  <table class="default">
    <tr>
      <th class="text-align-center" style="width: 3em">p</th>
      <th class="text-align-center" style="width: 3em">¬p</th>
    </tr>
    <tr>
      <td class="text-align-center">T</th>
      <td class="text-align-center">F</td>
    </tr>
    <tr>
      <td class="text-align-center">F</td>
      <td class="text-align-center">T</td>
    </tr>
  </table>
  <figcaption>Logical negation table</figcaption>
</figure>
<p>A truth table is a mathematical table used in logic -specifically in connection with Boolean algebra, boolean functions, and propositional calculus- to compute the functional values of logical expressions on each of their functional arguments, that is, on each combination of values taken by their logical variables.</p>
<p>Logical negation is an operation on one logical value, typically the value of a proposition, that produces a value of true if its operand is false and a value of false if its operand is true (as you can see in the logical negation table)</p>

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).

In our second example, we'll see that the presence of a caption isn't always necessary in figures. We'll be writing a short biography of Charles Dickens acompanied by his portrait in a figure.

<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>
<p>Born in Portsmouth, Dickens left school to work in a factory...</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.

Born in Portsmouth, Dickens left school to work in a factory...

Lastly, we'll see that the element figcaption can also be used to add information about the source of the content provided in figure. Here, a description and a reference to the portrait's author is added to the previous example.

<h1>Charles Dickens</h1>
<figure style="float: right">
  <img src="/assets/images/charles-dickens.jpg">
  <figcaption style="text-align: center">Charles Dickens<br><small>Image courtesy of CharlieArt</small></figcaption>
</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>
<p>Born in Portsmouth, Dickens left school to work in a factory...</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.

Born in Portsmouth, Dickens left school to work in a factory...

Attributes

Events