Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 229
Fabrizio Calderan Avatar asked Oct 15 '12 16:10

Fabrizio Calderan


People also ask

What is the use of picture element in HTML?

The HTML <picture> element gives web developers more flexibility in specifying image resources. The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

What is the use of figure tag in HTML5?

The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document.

What is the difference between figure and image tag?

1. The figure tag is used to semantically organize the content of images, videos, audios or even charts or tables, block of codes in the HTML document. The image tag is used to add an image to an HTML page.

Can a figure have multiple images?

Multiple Images in figureYou can put multiple img tags in a figure if they are related in the context of your document.


2 Answers

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.

like image 156
Wilto Avatar answered Sep 23 '22 17:09

Wilto


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.

like image 27
Brian Avatar answered Sep 20 '22 17:09

Brian