Why the HTML paragraph behaves so oddly on my chrome?

Question

Get an empty HTML, type in this and see its source code on Google Chrome:

 
WHY?

If you did i

Answer 1

As a basic explanation, div is meant to be a 'box' for layout. A box for holding other things. The p element, however, is meant to be for (surprise) a paragraph of text.

Because a div (container) was put inside a p (inline element), it is (technically) incorrect. Google Chrome (being the standards-slightly-obsessed) browser that it is, it tries to correct this incorrect nesting by adding the extra elements as shown.

The W3C has a (very long) article about these language specifications on their site, however possibly the best thing to do to check for inconsistencies and potential problems like this is to Validate your written source code. The easiest way to do this is with the W3C Validator.