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

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, 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>

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

enter image description here

This is shown in this video

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