【HTML】<picture>タグを<p>で囲んではいけないのはなぜ？

解決したいこと

テキスト画像を配置する際、
<picture>を<p>で囲んではいけない理由が分かりません。

❌NG

<p>
    <picture>
        <source media="(min-width: 769px)" srcset="/img/img-pc.webp" width="800" height="400">
        <img src="/img/img-sp.webp" width="400" height="200" loading="lazy" alt="画像">
    </picture>
</p>

⭕️OK

<div>
    <picture>
        <source media="(min-width: 769px)" srcset="/img/img-pc.webp" width="800" height="400">
        <img src="/img/img-sp.webp" width="400" height="200" loading="lazy" alt="画像">
    </picture>
</div>

納得できない点

• コンテンツカテゴリ的に、pの下にpictureは置けるはずなのになぜ？
• sourceが原因なのであれば、divでpictureを囲む形もNGになるのでは？
• pictureはブロック要素と同じ扱いをされる、みたいなことを言われたが、ブロック要素ではないよな？

各要素のコンテンツカテゴリは、上記の通りだと思います。

pはフレージングコンテンツを内包できます。
それなのに、フレージングコンテンツに属しているpictureを配置できない理由が分かりません。
コンテンツカテゴリに属さないsourceが子孫要素にいるのが問題なのでしょうか。

こんな形ほぼ見ることはないと思いますが、

<p>
    <picture>
       <img src="/img/img-sp.webp" width="400" height="200" loading="lazy" alt="画像">
    </picture>
</p>

の形ならOKなのでしょうか。

しかし、divもフローコンテンツかインライン要素しか中に入れることができないはずです。
なぜdivで囲む形は許されるのかも、納得できません！

また、pictureがブロック要素と同じような扱いをされるというのは、どういうことなのでしょうか。

chatGPTに聞いても理解することができませんでした。
どなたか解説していただけますと幸いです。

参考にしたサイト

• HTML Living Standard
  https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

• MDN <p>
  https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/p

2025/06/09 追記

• pで囲んではいけないという情報の元出は？

現時点では、私も明確なweb情報は見つけられていません。
業務のFBでもらった意見なのですが、
「ブロックレベル要素を入れることができない」、というところからこの問題が生じました。
https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

pictureはブロックレベルの要素じゃなくない？と思い、調べてみたのですが記事は見つからず…。
chatGPTに聞いて出てきた答えが、以下になります。

これは、HTMLパーサの「p 要素の自動終了ルール（implicit end tag）」によるものです。

✅ ポイント
picture は確かに phrasing content に該当します。
しかし、<picture> 内に含まれる <source> 要素は phrasing content に該当しません。
<p> の中に phrasing content 以外が含まれた時点で、ブラウザは <p> を自動的に閉じる仕様になっています。

FBを受けた私も、FBを出した方も、？？？となっているので、
納得できる解を見つけるために質問してみた、という流れになります。

そもそも、FB時点の情報がおかしい、という可能性もあるのでしょうか…