Putting <div> inside <p> is adding an extra <p>

Issue

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

In HTML 4, the DIV element cannot be inside another block-level element, like a P element. However, in HTML5 the DIV element can be found inside and can contain other flow content elements, like P and DIV.

I have something like this inside a form

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

but when Rails auto-generates an error_explanation div wrapping the input, the one paragraph turns into two, and I see this in Firebug:

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

Also, if I just add a simple

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

the same issue occurs (JSFiddle) and it gets rendered in the DOM as

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

Why?

---

I later e-mailed the author of the article and she made the appropriate changes.

Solution

From the fine specification:

p – paragraph

[...]

Permitted contents

Phrasing content

And what is this Phrasing content?

Phrasing content:

Consists of phrasing elements intermixed with normal character data.

Normal character data is just that: unmarked up text. Phrasing elements are:

a or em or strong ... [a bunch of other elements none of which are div]

So, <p><div></div></p> is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:

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

You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you want.

Your reference at about.com disagrees with the specification at w3.org. Your reference is misleading you.

Answered By - mu is too short