The Right Way to Use Figure & Figcaption Elements

The figure and figcaption elements are two semantic elements that are often used together. If you haven’t looked at the spec, had a chance to use them in your projects, or have no idea how, here are some tips on how to use them correctly.

The figure element is commonly used for images:

<figure>
  <img src="dog.jpg" alt="Maltese Terrier">
</figure>

The figure element represents a self-contained unit of content. This means that if you were to move the element either further down a document, or to the end of the document, it would not affect the document’s meaning.

Therefore, we also need to remember that not every image is a figure.

Multiple Images in figure

You can put multiple img tags in a figure if they are related in the context of your document.

<figure>
  <img src="dog1.jpg" alt="Maltese Terrier">
  <img src="dog2.jpg" alt="Black Labrador">
  <img src="dog3.jpg" alt="Golden Retriever">
</figure>

Other Elements Can Be Used With figure

The figure element is not limited to images either. You can use it for things such as:

• code blocks,
• videos,
• audio clips, or
• advertisements.

Here is an example of figure being used for a block of code:

<figure>
  <pre>
    <code>
      p {
          color: #333;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
</figure>

Nesting figure Inside Another figure

You can nest a figure inside another figure if it makes sense to. Here, an ARIA role attribute has been added to improve semantics.

<figure role="group">
  <figcaption>Dog breeds</figcaption>
  <figure>
    <img src="dog1.jpg" alt="Maltese Terrier">
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="dog2.jpg" alt="Black Labrador">
    <figcaption>Cute black labrador</figcaption>
  </figure>
</figure>

For further guidance on using the figure and figcaption elements with ARIA, see my earlier article on how to use ARIA effectively with HTML5.

Correct Usage of figcaption

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

Not every figure needs a figcaption.

However, when using figcaption, it should ideally be the first or last element within a figure block:

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="dog1.jpg" alt="Maltese Terrier">
  <img src="dog2.jpg" alt="Black Labrador">
  <img src="dog3.jpg" alt="Golden Retriever">
</figure>

Or:

<figure>
  <img src="dog1.jpg" alt="Maltese Terrier">
  <img src="dog2.jpg" alt="Black Labrador">
  <img src="dog3.jpg" alt="Golden Retriever">
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

You Can Use Flow Elements in figcaption Too

If you need to add more semantics to an image, you can use elements such as h1 and p.

<figure>
  <img src="dogs.jpg" alt="Group photo of dogs">
  <figcaption>
    <h2>Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

Do you have any other tips for using the figure and figcaption elements?