Warum kann das <p> -Tag kein <div> -Tag enthalten?

169

Soweit ich weiß, ist das richtig:

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

Das ist aber falsch:

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

Der erste kann den W3C-Validator (XHTML 1.0) bestehen, der zweite nicht. Ich weiß, dass niemand Code wie den zweiten schreiben wird. Ich will nur wissen warum.

Und was ist mit der Containment-Beziehung anderer Tags?

html xhtml Henry H Miao
quelle
9
Da <p>es sich um ein Element auf Blockebene handelt und (soll) zum Anzeigen von Text verwendet wird, werden keine anderen Elemente auf Blockebene darin zugelassen, sondern nur Inline-Elemente wie <span>und <strong>.
Bojangles
22
JamWaffles: Das pist ein Element auf Blockebene, das nichts damit zu tun hat. divist auch einer und erlaubt andere Blöcke.
Joey
Mögliches Duplikat von: stackoverflow.com/questions/4967976/… (ohne Flaggen): Jede anständige Antwort darauf beantwortet das Lesen der HTML-Spezifikation und damit auch diese.
Ciro Santilli 17 冠状 病 六四 事件 17
Das Deklarieren des Div-Stils als Inline funktioniert ebenfalls nicht.
Triynko

Antworten:

198

Ein maßgeblicher Ort, um nach zulässigen Containment-Beziehungen zu suchen, ist die HTML-Spezifikation. Siehe zum Beispiel http://www.w3.org/TR/html4/sgml/dtd.html . Es gibt an, welche Elemente Blockelemente und welche Inline-Elemente sind. Suchen Sie für diese Listen nach dem Abschnitt "HTML-Inhaltsmodelle".

Für das P-Element wird Folgendes angegeben, was angibt, dass P-Elemente nur Inline-Elemente enthalten dürfen.

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

Dies steht im Einklang mit http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , wonach das P-Element "keine Elemente auf Blockebene enthalten kann (einschließlich P selbst)."

Colin Campbell
quelle
74
Ich habe die Angewohnheit, die Spezifikationen zu vermeiden, die maßgeblichsten Dokumente, die wir für solche Dinge haben, weil es keinen Spaß macht, sie zu lesen. +1, um sie tatsächlich zu lesen, zu verstehen und zur Beantwortung von Fragen zu verwenden.
Stoutie
3
Gilt das noch für HTML 5? Die verknüpfte Spezifikation verweist speziell auf HTML 4, und HTML 5 verfügt nicht über eine Dokumenttypdefinition .
Ajedi32
2
@ Ajedi32 Ja, hier . HTML5 hat viele Begriffe umbenannt, aber "Zulässiger Inhalt: Phrasierung von Inhalten" bedeutet dasselbe wie das %inlineobige Bit. Siehe auch Oriols Antwort.
Herr Lister
@Stoutie Genau wie du, deshalb gibt es einen Stapelüberlauf.
Kapitän Hypertext
69

Kurz gesagt, es ist unmöglich, ein <div>Element in a <p>im DOM zu platzieren, da das öffnende <div>Tag das <p>Element automatisch schließt .

defau1t
quelle
2
Ah, das erklärt, warum es vor einem Div in ap einen riesigen Raum gibt, weil das p tatsächlich kurz vor dem Div endet.
AaronLS
2
Sie können ein divElement in a p im DOM platzieren , z myP.appendChild(myDiv). Ein HTML-Parser wird dies jedoch nicht tun.
Oriol
1
Tu das nicht. Sie haben keine Ahnung, wie das in zukünftigen Browsern reagieren wird. Die Technologie ändert sich ständig. Möglicherweise gibt es einen dynamischen HTML-Parser, der dies eines Tages ungültig macht. Das Ziel in Web Dev ist es, Dinge zu schaffen, die sowohl wünschenswert als auch einigermaßen kompatibel sind. Wenn Sie umgehen können, was der Browser zulässt, können Sie mit Sicherheit nicht sicherstellen, dass er für immer funktioniert. Verwenden Sie einfach einen Span-Typ ... Wenn Sie ein Div benötigen, verwenden Sie das p-Tag nicht mehr.
39

Laut HTML5 ist das Inhaltsmodell von divElementen Flussinhalt

Die meisten Elemente, die im Hauptteil von Dokumenten und Anwendungen verwendet werden, werden als Flow-Inhalt kategorisiert.

Das schließt ein p Elemente ein, die nur verwendet werden können, wenn der Flussinhalt erwartet wird.

Daher divkönnen pElemente Elemente enthalten .

Allerdings das Inhaltsmodell von pElementen ist jedoch die Formulierung von Inhalten

Phrasierungsinhalt ist der Text des Dokuments sowie Elemente, die diesen Text auf der Ebene innerhalb des Absatzes kennzeichnen. Läuft von Phraseninhalten bilden Absätze .

Das beinhaltet nicht div Elemente ein, die nur verwendet werden können, wenn Flow-Inhalte erwartet werden.

Daher können pElemente keine divElemente enthalten .

Da das End-Tag von pElementen weggelassen werden kann, wenn diepdiv Element (unter anderem) unmittelbar ein Element folgt , gilt Folgendes

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

wird analysiert als

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

und der letzte </p>ist ein Fehler.

Oriol
quelle
Aber wenn in CSS, wenn ich div auf Inline setze, warum wird das nicht respektiert?
Sanjay
Da CSS-Werte nach dom Parsing angewendet werden ... auch wenn wir dies div as inline in CSSnicht verwenden, <p>Text</p> <div>some words</div> <p></p> ist mein Verständnis korrekt , da eine neue analysierte Struktur vorliegt ?
Sanjay
@ Sanjay Ja, sieht so aus, als hättest du recht. Wenn Sie während meiner Beobachtungen <span> in <p> einfügen und dann die Anzeige von span auf "block" setzen, wird sie als typisches Blockelement ohne einen solchen Effekt gerendert.
Andrii Naumovych
-1

Nach dem X-HTML wurden die Konventionen geändert, und jetzt ist es eine Mischung aus Konventionen von XML und HTML. Deshalb ist der zweite Ansatz falsch und der W3C-Validator akzeptiert die korrekten Dinge, die den Standards und Konventionen entsprechen.

geekdev786
quelle
XHTML hat sich nicht viel geändert. Das p-Element durfte niemals ein div-Element enthalten.
Quentin
-7

Weil das divTag eine höhere Priorität hat als das pTag. Das pTag repräsentiert ein Absatz-Tag, während das divTag ein Dokument-Tag darstellt.

Sie können viele Absätze in ein Dokument-Tag schreiben, aber Sie können kein Dokument in einen Absatz schreiben. Das gleiche wie eine DOC-Datei.

Gaurav Agrawal
quelle
2
Eigentlich ist es Teilung. Sonst wäre es <doc>: D
Kyle
6
Vorrang ist kein Konzept, das für HTML-Elemente gilt, und div stellt eine Unterteilung dar, wie @KyleSevenoaks sagt :)
SimplGy
Was ist eine DOC-Datei? Eine Microsoft Word- Datei?
Peter Mortensen