web-dev-qa-db-ja.com

HTML5の<figure>要素内の<picture>の使用？

HTML5では、現在<figure>要素、そのように定義（ W3C参照 ）

図要素は、コンテンツの単位を表します。オプションで、自己完結型のキャプションが付いています。これは、通常、ドキュメントのメインフローから単一のユニットとして参照され、ドキュメントのメインフローから離れて移動できます。ドキュメントの意味に影響を与えます。

最近新しい要素<picture>は Responsive Images Community group によって提案され、定義されました 参考資料 のように

さまざまなソースからの画像を表示するために使用される画像要素（srcset属性を参照）。ユーザーエージェントが表示する画像は、ソース画像を取得するためのアルゴリズムによって異なります。

2つの説明は矛盾していないようです（そして画像のドキュメントはdraft状態です）ここに私の質問：それは可能です（技術的および意味的に）このように、picture要素内にネストされたfigureを持つには？

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

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

スペックでそれについての言及は見つかりませんでした。 ：\

注：現在この要素を実装しているブラウザはないことを知っています。単に jQuery picture を使用して実験を行っています

ありがとうございました。

imagehtmlresponsive-designw3c
28
Fabrizio Calderan

実際にはまだ公式ではないので見つけられませんが、答えはyesであると仮定します。

現時点では、次のようなことをしています。

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

および<picture>は、単に複数のsrcを使用する方法であることを意味します<img>レスポンシブサイトの場合、技術的には-承認された場合-のように見えます。

11
Brian

ここでマットマーキス-私はpicture仕様の編集者の一人です（ http://picture.sensitiveimages.org ）。

短い答えは「はい」、長い答えは「間違いなく」です。意味的に正しい（figureには画像、グラフ、表、コードスニペットなどを含めることができます）、100％有効です。

39
Wilto

はい、<picture>タグに<figure>を含めることは正しいです。私はコースの1つでGoogleの承認を得てこれを実証します。

enter image description here

これはこのビデオに示されています

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

0
Anubhav Yadav