HTML5 multiple <figcaption> inside <figure>

Question

I would like to know if a figure element can contain more than one figcaption child?

I read something somewhere (sorry, now I can't find it) that seemed to suggest it couldn't- yet I am sure that a figure can contain more than one img, so that seems illogical.

What if I have two related images side by side, for which I want separate captions?

Answer 1

You can nest the img plus its figcaption into multiple figure tags. To add more semantics to the code you can add an ARIA role attribute.

<figure role="group">
    <figcaption>Caption for the whole group of images</figcaption>

    <figure>
        <img src="picture1.jpg" alt="Description of picture 1">
        <figcaption>Caption for Picture 1</figcaption>
    </figure>

    <figure>
        <img src="picture2.jpg" alt="Description of picture 2">
        <figcaption>Caption for Picture 2</figcaption>
    </figure>

</figure>

Answer 2

In HTML5 figure is a sectioning root. It may have sectioning root or flow content as content. A figcaption is flow content, and may only have flow content as content. So, a figcaption may not have a figure as content.

A figure may have another figure as content, however. Keep in mind that a figcaption must be the first or last child of a figure.

So code might look like this:

<figure>
  <img>
  <figure>
    <figcaption></figcaption>
  </figure>
  <figcaption></figcaption>
</figure>

or

<figure>
  <figcaption></figcaption>
  <img>
  <figure>
    <figcaption></figcaption>
  </figure>
</figure>

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure