<p>タグに<div>タグを含めることができないのはなぜですか?


169

私の知る限り、これは正しいです:

<div>
  <p>some words</p>
</div>

しかし、これは間違っています:

<p>
  <div>some words</div>
</p>

1つ目はW3Cバリデーター(XHTML 1.0)を渡すことができますが 2つ目は渡すことができません。私は誰も2番目のようなコードを書かないことを知っています。なぜか知りたいだけです。

そして、他のタグの包含関係はどうですか?


9
ため、<p>ブロックレベル要素であり、テキストを表示するために使用される(ことになって)され、それは内部の他のブロックレベル要素を許容するが、等のみインラインものではないであろう<span><strong>
Bojangles

22
JamWaffles:それpはブロックレベルの要素であり、それとは何の関係もありません。divまた、1つであり、他のブロックを許可します。
Joey

重複の可能性:stackoverflow.com/questions/4967976/…(フラグなし):これに対する適切な回答は、HTML仕様の読み方に対応するため、これにも対応します。
Ciro Santilli郝海东冠状病六四事件法轮功

divのスタイルをインラインとして宣言しても機能しません。
Triynko

回答:


198

許可された包含関係を探す信頼できる場所はHTML仕様です。たとえば、http://www.w3.org/TR/html4/sgml/dtd.htmlを参照してください。ブロック要素である要素とインライン要素である要素を指定します。それらのリストについては、「HTMLコンテンツモデル」とマークされたセクションを検索してください。

P要素の場合、次のように指定します。これは、P要素にインライン要素のみを含めることができることを示しています。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

これはhttp://www.w3.org/TR/html401/struct/text.html#h-9.3.1と一致しており、P要素は「ブロックレベルの要素(P自体を含む)を含むことはできない」と述べています。


74
私はこのようなものについて最も権威のある文書である仕様を読むのは面白くないので、それらを避ける習慣があります。実際に読んで理解し、質問に答えるために+1する。
Stoutie

3
これはまだHTML 5に有効ですか?リンクされている仕様は特にHTML 4を参照しており、HTML 5にはドキュメントタイプの定義がありません
Ajedi32

2
@ Ajedi32はい、こちら。HTML5は多くの用語を改名しましたが、「許可されたコンテンツ:フレージングコンテンツ」は%inline上記のビットと同じ意味です。Oriolの回答も参照してください。
リスター氏2016年

@Stoutieそうですね、それがスタックオーバーフローが存在する理由です。
キャプテンハイパーテキスト

69

つまり、開始タグが自動的に要素を閉じるため、DOM <div>内に要素を配置することは不可能です。<p><div><p>


2
ああ、これは、pがdivの直前で実際に終了するため、ap内のdivの前に大きなスペースがある理由を説明しています。
AaronLS 2014

2
あなたはできる配置div内の要素をp DOMで、例えばmyP.appendChild(myDiv)。しかし、HTMLパーサーはそれを行いません。
Oriol

1
それをしないでください。あなたはそれが将来のブラウザでどのように反応するのか分かりません。テクノロジーは常に変化しています。その1日を無効にする動的HTMLパーサーがあるかもしれません。Web開発の目標は、望ましいものであり、ある程度互換性のあるものを作成することです。ブラウザーが許可するものをバイパスできる場合、ブラウザーが永久に機能することを保証することはできません。スパンの男を使用してください... divが必要な場合は、pタグの使用を停止してください。

39

HTML5によると、要素のコンテンツモデルdivフローコンテンツです

ドキュメントおよびアプリケーションの本文で使用されるほとんどの要素は、フローコンテンツとして分類されます。

これにはp、以下の場所でのみ使用できる要素が含まれますコンテンツフローするますが期待されます。

したがって、div要素には要素を含めることができますp


しかし、内容モデルp要素があるフレージングコンテンツ

フレージングコンテンツは、ドキュメントのテキストと、段落内レベルでそのテキストをマークアップする要素です。一連のフレージングコンテンツが段落を形成します。

これにはdiv要素が含まれていません。コンテンツフローする場合にのみ使用できますが期待さます。

したがって、p要素に次のものを含めることはできませんdiv

要素の直後に要素が続く場合、要素の終了タグp省略できるため、次のようになります。pdiv

<p>
  <div>some words</div>
</p>

として解析されます

<p></p>
<div>some words</div>
</p>

そして最後</p>はエラーです。


しかしCSSの場合、divをインラインに設定すると、なぜそれが尊重されないのですか?
サンジェイ2018年

CSS値はdom Parsingの後に適用されるので、たとえそれをdiv as inline in CSS使用しなくても、新しい解析された構造は<p>Text</p> <div>some words</div> <p></p> 正しいので私の理解は正しいですか?
サンジェイ2018年

@Sanjayはい、あなたは正しいようです。さらに、私の観察では、<span>を<p>内に配置してから、スパンの表示を「ブロック」に設定すると、そのような効果のない典型的なブロック要素としてレンダリングされます。
Andrii Naumovych

-1

X HTMLの後、規則が変更され、XMLとHTMLの規則が混在するようになりました。そのため、2番目のアプローチは間違っており、W3Cバリデーターは、標準と規則に従って正しいものを受け入れます。


XHTMLはそれほど変わっていません。p要素にdiv要素を含めることは許可されていません
クエンティン

-7

divタグはタグよりも優先順位が高いためですpp一方、タグは段落タグを表し、divタグは、文書のタグを表します。

文書タグには多くの段落を書くことができますが、文書を段落に書くことはできません。DOCファイルと同じです。


2
実際、それは部門です。それ以外の場合は<doc>:D
カイル

6
優先順位はhtml要素に適用される概念ではありません。@ KyleSevenoaksが言うように、divは分割を表します:)
SimplGy 2013年

DOCファイルとは?A Microsoft Wordのファイル?
Peter Mortensen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.