Use of <picture> inside <figure> element in HTML5?

In HTML5 we currently have a <figure> element, defined like so (W3C reference)

> The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Recently a new element <picture> was proposed by the Responsive Images Community group and it was defined in the reference like so

> The picture element used for displaying an image that can come from a range of sources (see srcset attribute). Which image the user agent displays depends on the algorithm for deriving the source image.

Since the two descriptions seems to be not contradictory (and documentation on picture is on draft state yet) here my question: is it possible (technically and semantically) to have a nested picture inside a figure element, in this way?

<figure>
   <picture>
      <source ...>
      <source ...>
      <source ...>
      <img..>
   </picture>

   <figcaption>...</figcaption>
</figure>

I've found no references about it in specs. :\

Note: I'm aware that no browser implements currently this element, I'm just making some experiments with jQuery picture

Thank you.

Mat Marquis here—I’m one of the editors on the picture spec ( http://picture.responsiveimages.org ).

The short answer is “yes,” the long answer is “definitely.” Semantically correct (figure can contain images, charts, tables, code snippets, and so on), and 100% valid.

You won't find it since it's not actually official yet, but I am going to assume the answer is yes, that is fine.

At the moment, you do something like:

<figure>
  <img src="image.jpg" alt="The Image">
  <figcaption>A Caption</figcaption>
</figure>

and <picture> is simply meant to be the a method of have a multiple src'd <img> for responsive sites, so technically it would seem like -- if it were approved -- your example is valid.

Yes, you are correct in including <picture> in <figure> tag. I will substantiate this with an endorsement by Google in one of its course.

This is shown in this video

https://youtu.be/StKZMBURZpk?t=29

Yes, we can. Now its official and we can use them as responsive images too.

The <figure> tag specifies self-contained content Ex- Images. The content of the <figure> element is independent of the main flow. If we removed it, it shouldn't affect the flow of the document.

The <figcaption> element is used to add a caption for the <figure> element.

<figure>
   <figcaption>Caption</figcaption>
</figure>

The <picture> tag give more flexibility in specifying image resources. Instead of having one image, we can have multiple images that will fill the best suited Image A/Q to browser's viewport.

<picture>
   <source srcset="image-big.png" type="image/png" media="(min-width:1920px)"> 
   <source srcset="image-med.png" type="image/png" media="(min-width:1200px)"> 
   <source srcset="image-small.png" type="image/png" media="(min-width:700px)"> 
   <img src="backup.png" alt="Test" class="abc">
</picture>

<picture> can also be used with <video> and <audio> elements. It will work in similar way.

So, This is totally Valid.

<figure>
   <picture>
      <source srcset="image-big.png" type="image/png" media="(min-width:1920px)"> 
      <source srcset="image-med.png" type="image/png" media="(min-width:1200px)"> 
      <source srcset="image-small.png" type="image/png" media="(min-width:700px)"> 
      <img src="backup.png" alt="Test" class="abc">
   </picture>
   <figcaption>Caption</figcaption>
</figure>

Figure is a block-level element.
Picture is an inline-level element.

Block-level elements can contain inline-level elements.
According to this and the previous answers, it's correct to place picture inside figure tag.