Quick Tip: The Right Way to Use Figure & Figcaption Elements

Georgie Luhur
Georgie Luhur
Share

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?

Frequently Asked Questions (FAQs) about Figure and Figcaption Elements

What is the purpose of using the figure and figcaption elements in HTML5?

The figure and figcaption elements in HTML5 are used to mark up diagrams, illustrations, photos, and code snippets alongside a caption. The figure element acts as a container for such content, and the figcaption element is used to provide a caption or a brief explanation about the content enclosed within the figure element. This helps in providing context to the content and enhances the understanding of the user.

Can I use multiple figcaption elements inside a single figure element?

No, it is not recommended to use multiple figcaption elements inside a single figure element. According to the HTML5 specification, a figure element should contain only one figcaption. This is to ensure that the caption accurately describes the content within the figure element.

Is it necessary to use a figcaption with every figure element?

While it is not mandatory to use a figcaption with every figure element, it is highly recommended. The figcaption provides a description or explanation for the content within the figure element, enhancing its understanding. However, if the content within the figure element is self-explanatory, a figcaption may not be necessary.

Can I place the figcaption element outside the figure element?

No, the figcaption element should always be nested within the figure element. Placing the figcaption outside the figure element will result in invalid HTML and may cause issues with the rendering of the page.

How does the use of figure and figcaption elements impact SEO?

Using the figure and figcaption elements can positively impact SEO. Search engines like Google use the text within the figcaption element to understand the content within the figure element. This can help in improving the visibility of the content in image search results.

Can I use other elements inside a figure element?

Yes, you can use other elements inside a figure element. Apart from the figcaption, you can include images, code snippets, diagrams, and other relevant content within the figure element.

How does the use of figure and figcaption elements enhance accessibility?

The use of figure and figcaption elements enhances accessibility by providing context to the content. Screen readers can read out the content of the figcaption, providing a description or explanation of the content within the figure element. This can be particularly helpful for users with visual impairments.

Can I style the figcaption element using CSS?

Yes, you can style the figcaption element using CSS. You can apply various CSS properties to change the font, color, background, and other aspects of the figcaption to make it more visually appealing and consistent with the overall design of your webpage.

Can I use the figure and figcaption elements in older versions of HTML?

The figure and figcaption elements are specific to HTML5 and are not supported in older versions of HTML. If you are working with an older version of HTML, you may need to use other methods to provide captions for your content.

Can I use the figure and figcaption elements for complex data like tables?

While you can use the figure and figcaption elements for complex data like tables, it may not always be the best choice. For complex data, it might be more appropriate to use the table element with the caption element to provide a description or explanation of the data.