HTML & CSS
Article
By Georgie Luhur

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

By Georgie Luhur

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?

  • Sue Bless

    With everybody’s busy schedules, at times our acne treatment regimens can easily slip by the wayside.

  • Timothy Lee

    Can I use list with figure? I want to create caption for my list like this

    Fruit

    Apple
    Pear
    Orange

    • Yes, you can use a list in a `figure` element if you are referencing it somewhere in your content and if its position in the document is not important. However, if you only want to label your list with a caption and the position of the list is important for document flow, perhaps use a heading element instead.

  • Marc

    “Therefore, we also need to remember that not every image is a figure.” I always have trouble determining when an image should be in or out of a figure; can you share any tips you may have that’ll help?

    • danielsdesk

      I’ve always thought (and someone correct me if I’m wrong) of figure as like ‘footnote’ so in cases where you are making a statement, which itself is complete, but the subject of that statement may reference something else that can give you more information, like a block of content with a graph or illustration w/ a caption, or even a block of code, then that reference can be a figure. In the cases of references like that, their position in the content is not explicitly necessary within that statement you are reading; it could be like an illustration on the next page of a book that is simply referred to (i.e. “Refer to Figure 7 below” and “below” would be anywhere after that content, not necessarily right after it exactly, so you would scan down the page and then over to the next page until you came across it). Like if we were talking about a math book, and your content had a statement discussing the use of a formula and applying it to something specific, and you had a reference on the formula to some figure, that figure could include a LaTeX of the formula being functionally used, or maybe just an illustrated graph demonstrating what happens when that formula is applied in the way you stated earlier. Either way, the content grouped in that figure is not necessary to be smack dab in the middle of that content of your statement. If it was, like we were setting up some kind of math problem and you needed an illustration to convey the problem, that is something that would not be a figure. It would be necessary in the content block. But figures, like footnotes, are linked to or referenced from somewhere else and you can follow the reference to get some more information. That’s how I think of them, at least.

  • mikestreety

    We’ve used and for graphs and legends – seemed to fit quite well

  • I wasn’t aware of the “context independent” part of the element. How would an image with caption as part of a paragraph be coded? With s?

    <article>
    <figure style="float: left;">
    <img src="dog2.jpg" alt="Black Labrador">
    <figcaption>Cute black labrador</figcaption>
    </figure>
    <p>
    This is the article the image is part of ...
    </p>
    </article>

    I added some inline style to better illustrate the example

    • Ralph Mason

      I wanted to help with this, but can’t quite understand the question. Could you clarify?

      • If I have a paragraph in an article for which there is also an image with caption provided I would outline it as shown above. But now this image isn’t really context independent, therefore would the position of the whole container be bound to this parent. This would seem to me contrary to the stated

        “The figure element represents a self-contained unit of content.”

        & was wondering what the correct syntax would look like.

        • Hey Albert, sorry that you are receiving a response so late…!

          The figure element is self-contained, so it’s related to the rest of the content but not completely independent. A good thing to remember is that If you are referencing the image in the paragraph, eg. “The cute labrador in the image above…” or somehow mentioning the positioning of the image, then you would avoid using the figure element.

  • Tiago Celestino

    I didn’t know the possibilities of use to figure tag. Great article.

  • Had no idea could be extended to include video, code blocks etc. Seems the important thing to remember is that it has to have its own self contained unit.

  • How figure would be beneficial for video, just to add caption to it?

  • Koko Krumov

    May I use and in list of products like this

    Title of product
    Some text

    Left
    Right

    Title of product
    Some text

    Left
    Right

    ….

    • Hi Koko, I’m not sure about the usage of the buttons in your example, but, yes, you can use figures and figcaptions for products. I have been doing this for quite a few years on e-commerce sites (having the thumbnail in the figure and the product name as the figcaption).

      I haven’t actually found a lot of discussion about it being correct or incorrect for things like product listings – I consider it to be fine but happy for someone else to chime in if they have other thoughts.

  • I’d like to know how spiders would look at something like this.

    Acme Inc.

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.