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.
This is shown in this video
https://youtu.be/StKZMBURZpk?t=29