figcaption element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

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="egt">
    <tr>
      <th class="tac" style="width: 3em">p</th>
      <th class="tac" style="width: 3em">¬p</th>
    </tr>
    <tr>
      <td class="tac">T</th>
      <td class="tac">F</td>
    </tr>
    <tr>
      <td class="tac">F</td>
      <td class="tac">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>

Truth tables

p ¬p
T F
F T
Logical negation table

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.

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)

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="../../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.

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.