12

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?

3
  • Searching your title on google came up with this: "Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements"
    – danronmoon
    Nov 13, 2014 at 16:29
  • 5
    Figure can be nested, so you can wrap each img in a figure with a figcaption and still have a figure element surrounding the whole lot.
    – Alohci
    Nov 14, 2014 at 1:31
  • Excellent. Thanks, Alochi- this is what I was looking for! If you want to add your comment as an answer, I'll accept.
    – Inigo
    Nov 14, 2014 at 15:25

3 Answers 3

23

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>
3
  • Figures cannot be contained within figcaptions. Mar 25, 2015 at 20:36
  • 2
    "within figcaptions"? I don't see a figure within a figcaption in the code… Everything seems valid to me. Mar 26, 2015 at 20:12
  • 1
    I know, but I can't undo it. :( If it's any consolation, it dinged me too. Apr 1, 2015 at 19:31
4

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

1
  • HTML5.1 is looking to change this, so that a figcaption can be anywhere inside a figure. Aug 8, 2017 at 15:45
0

For what I can see, you can only use it once within figure: http://www.w3schools.com/tags/tag_figcaption.asp

1
  • 8
    use of w3schools as an authority should be discouraged. It is imprecise and not well regarded.
    – code_monk
    Dec 3, 2016 at 22:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.