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.