I am using "Edit Html" in firebug and inserting the following bit of code:
<div title="show-details">
X
<p class="quick-details">
<p title="about-pla开发者_运维知识库yer">
<p title="name">Drew Brees #9</p>
<p title="position">Quarterback</p>
<p title="team">The Saints</p>
</p>
</p>
</div>
However, when I move off of edit html mode, what is actually IN the DOM is this:
<div title="show-details">
X
<p class="quick-details">
</p><p title="about-player">
</p><p title="name">Drew Brees #9</p>
<p title="position">Quarterback</p>
<p title="team">The Saints</p>
<p></p>
<p></p>
</div>
Am I missing something about how the p
element works? The MDC says the content can be any flow element. Where are those </p>
s coming from? Is it firefox? firebug?
Edit before I accept the answer: So apparently <p>
cannot nest within <p>
, does that mean that the MDC is wrong or that I am somehow misinterpreting it?
It is incorrect to nest <p>
elements.
Firefox parses the HTML to get a DOM tree. The DOM tree is always well-formed even if the source code isn't. This representation might also present whitespace and escape codes differently.
Firebug primarily works with the DOM representation. This
- is simpler,
- is less likely to suffer from discrepencies of interpretation,
- and makes it possible to diagnose poorly-written HTML.
Firebug will refer back to the source only for things like script debugging.
Probably happening because <p>
are block-level
elements and cannot contain other block-level
elements.
Firebug is compensating and auto-correcting.
from w3 documentation
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
Since the p
element isn't allowed inside another p
element, and its end tag is optional, Firebug (or rather, the underlying HTML/SGML parser) inserts an end tag where it (correctly) guesses there should be one.
Edit: The HTML 4.01 spec is very clear on this; you cannot nest p
elements (and in that respect, the MDC is incorrect). The HTML5 spec, however, is very unclear on the subject (I have submitted feedback on the issue) The HTML5 spec is crystal clear on the subject, I'm just reading it wrong, and common sense as well as typographic effect dictates that a paragraph of text (which the p
element represents) cannot contain a second paragraph of text.
<div title="show-details">
X
<div class="quick-details">
<div title="about-player">
<p title="name">Drew Brees #9</p>
<p title="position">Quarterback</p>
<p title="team">The Saints</p>
</div>
</div>
</div>
精彩评论