Why the HTML paragraph <P> behaves so oddly on my chrome?_问答_开发者

Why the HTML paragraph <P> behaves so oddly on my chrome?

开发者 https://www.devze.com 2023-02-14 12:49 出处：网络

Get an empty HTML, type in this and see its source code on Google Chrome: <p><div> </div>WHY?</p>

相关专题：

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

<p><div>&nbsp;</div>WHY?</p>

If you did it like I did, you'll see this in the source:

<html>
<head></head><body><p>&nbsp;</p><div>&nbsp;</div>WHY?<p></p>
</body></html>

Just in case, here's a demo using jsbin. In that link, you see this:

[repeating P]


WHY?
[repeating P]

I've added this jQuery on it:

$("p").html("[repeating P]");

Remove the whole <div> from it, and everything goes back to normal. T开发者_如何学Gohis small weird unexpected behavior is consistent when adding more things in the <div>, and it could be a <span> or I guess whatever in there. And it doesn't matter if the HTML is well formated or not.

Anyone knows why?

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.

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.

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/

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