figureタグとpictureタグについて

Question

前提・実現したいこと

figureタグの中に、pictureタグをいれて、
キャプションをつける下記の方法は、間違っていますか？

w3cのコンテンツモデルの解説ページを見ると、
figureタグはフローコンテンツがいれられると書いてあるので、いいのかなと思ったのですが、
http://www.htmllint.net/html-lint/htmllint.html#でチェックしたところ、

<PICTURE>要素は<FIGURE>要素の下位要素にはなれません

と警告されてしまいました。

発生している問題・エラーメッセージ

やりたいことは下記の内容です。

 <figure>
     <picture>
       <source media="(max-width:667px)"
        srcset="img/me8-sp.png 667w"
        sizes="100vw">
       <source srcset="img/me8-pc.jpg 1280w"
        sizes="(max-width:1280px) 100vw,
        1280px">
        <img  class="img" src="img/me/me8-pc.jpg">
      </picture>

      <figcaption>キャプションを書きたい</figcaption>
</figure>

どなたかアドバイス頂けましたら幸いです。
宜しくお願いします。

Answer 1

許可されていると思われます。

<figure>: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN

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

質問に記載のリンターは、公式のものではないため、
100%正確とは限りません。
HTMLの文法チェックは、
W3C公式のものを使うことをお勧めします。

Unicorn - W3C 統合検証サービス

Comments

[nomura02]

良かったです！！
また、リンクを教えていただきありがとうございます。
安心しました！！