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

The paragraph tag is meant to contain text, or more precisely, inline elements. Chrome interprets a div inside a p as an html malformation and attempts to correct it as well as it can.

Answer 2

Nesting a div in a p is invalid HTML. I would guess that Chrome is just trying to correct it for you.

Answer 3

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.

Answer 4

I can't find a good source on this so I may be mistaken but I was recently reading about how unclosed p tags are technically valid html (obviously not valid xhtml though) Basically in the right circumstances they will close themselves, just like how a br or hr closes itself without an ending tag. Even if they're not technically valid, they apparently get used that way enough that it's considered acceptable to some of the less civilized crowds. Gross, I know.

I imagine what is happening is Chrome sees your block element (the div) after the p, so it assumes that you were intending the p to self close. I assume that seeing the ending p triggers the same action because to Chrome there is not currently an open p tag by the time it encounters the closing tag.

As a side note - If it didn't bother you to put a div in a p I would suggest reading up on why semantics are so important when it comes to html. I just looked through a few articles - may I suggest this one for a quick read? http://brainstormsandraves.com/articles/semantics/structure/