Question

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-player">
        <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?

Answer 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.