Putting <div> inside <p> is adding an extra <p> [duplicate]

Question

から http://webdesign.about.com/od/htmltags/p/aadivtag.htm

HTML 4.0では、DIV要素はP要素のような他のブロック-レベル要素の内部にあることはできません。 しかし、HTML5では、DIV要素はPやDIVのような他のフローコンテンツ要素の中に見つけることができ、含むことができます。

フォームの中にこのようなものがあります。

<p> <label...> <input...> </p>

が、Railsがerror_explanationというdivで入力を自動生成すると、1つの段落が2つになり、Firebugで見るとこのようになっています。

<p> <label...> </p> <div...> <input...> </div> <p> </p>

また、単純に

<p> <div> test </div> </p>

も同じ問題が発生します ( JSFiddle として DOM にレンダリングされます。

<p> </p> <div> test </div> <p> </p>

どうして？

更新しました。 記事の著者にメールしたところ、適切な変更をしてくれました。

どのように解決するのですか？

からの 細かい仕様 :

p - 段落

[...]

許可されたコンテンツ

フレーズコンテンツ

そして、これは何かというと フレーズコンテンツ ? フレーズ内容 :

構成要素 フレージング要素 が混在している 通常の文字データ .

通常の文字データ は、まさに「マークアップされていないテキスト」です。 フレージング要素 は

a または em または 強い ... [他の要素の束は、どれも div ]

では <p><div></div></p> は有効なHTMLではありません。仕様書に記載されているタグの省略ルールに従って <p> タグは自動的に <div> タグによって自動的に閉じられ、その結果 </p> タグにマッチする <p> . ブラウザはこれを修正するために、オープンな <p> タグの後に <div> :

<p></p><div></div><p></p>

を置くことはできません。 <div> の中に <p> の中に記述し、様々なブラウザから一貫した結果を得ることができます。ブラウザに妥当なHTMLを提供すれば、より良い動作をするようになります。

を置くことができます。 <div> の中に <div> に置き換えることができます。 <p> を <div class="p"> を追加し、適切なスタイルにすることで、望みのものを手に入れることができます。

about.comでのあなたの参照は、w3.orgでの仕様と一致しません。あなたの参照はあなたを惑わせます。