title: Why the HTML paragraph <P> behaves so oddly on my chrome?
body: <p>Get an empty HTML, type in this and see its source code on Google Chrome:</p>
  
  <pre><code>&lt;p&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;WHY?&lt;/p&gt;
  </code></pre>
  
  <p>If you did it like I did, you'll see this in the source:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;WHY?&lt;p&gt;&lt;/p&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Just in case, <a href="http://jsbin.com/iwale4" rel="noreferrer">here's a demo using jsbin</a>. In that link, you see this:</p>
  
  <pre><code>[repeating P]
  
  
  WHY?
  [repeating P]
  </code></pre>
  
  <p>I've added <a href="http://jsbin.com/iwale4/edit" rel="noreferrer">this jQuery</a> on it:</p>
  
  <pre><code>$("p").html("[repeating P]");
  </code></pre>
  
  <p>Remove the whole <code>&lt;div&gt;</code> from it, and everything goes back to normal. This small weird unexpected behavior is consistent when adding more things in the <code>&lt;div&gt;</code>, and it could be a <code>&lt;span&gt;</code> or I guess whatever in there. And it doesn't matter if the HTML is well formated or not.</p>
  
  <p>Anyone knows <strong>why</strong>?</p>