50

HTML5 には現在、<figure>そのように定義された要素があります ( W3C 参照)

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

最近、レスポンシブ イメージ コミュニティ グループ<picture>によって新しい要素が提案され、リファレンスで次のように定義されました。

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

2 つの説明は矛盾していないように見えるので (そして、画像に関するドキュメントはまだ下書き状態にあります)、ここで私の質問:このように要素picture内に入れ子にすることは (技術的および意味的に) 可能ですか?figure

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

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

仕様でそれについての参照は見つかりませんでした。:\

注: 現在、この要素を実装しているブラウザーがないことは承知しています。jQuery の画像を使って実験を行っているところです。

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

4

5 に答える 5

76

Mat Marquis です。私はpicture仕様の編集者の 1 人です ( http://picture.responsiveimages.org )。

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

于 2014-05-29T19:26:49.230 に答える
19

実際にはまだ正式なものではないため、見つけることはできませんが、答えはyesであると仮定します。それで問題ありません。

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

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

レスポンシブサイト用に複数のsrcを作成する方法で<picture>あることを単に意味している<img>ため、技術的には、承認された場合、あなたの例は有効です。

于 2012-10-15T16:37:26.750 に答える