Best IT Recipes

Why does the <p> HTML paragraph behave so strangely on my chrome?

Get the empty HTML code, enter it and look at its source code in Google Chrome:

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

If you did it the way I did, you will see it in the source:

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

Just in case, here is a demo using jsbin . In this regard, you see the following:

 [repeating P] WHY? [repeating P]

I added this jQuery on it:

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

Remove the entire <div> from it, and everything will return to normal. This little strange unexpected behavior is consistent when adding more things to a <div> , and it could be a <span> , or I think, whatever. And it doesn't matter if the HTML is well-formed or not.

Does anyone know why ?

+9
html
Mar 03 2018-11-11T00:
source share
4 answers

As a basic explanation, a div is for a “layout” for a layout. A box for storing other things. However, the p element is for a (unexpected) paragraph of text.

Since the div (container) was placed inside p (inline element), it is (technically) incorrect. Google Chrome (being a standards-oriented browser), it tries to fix this incorrect attachment by adding additional elements as shown.

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

+17
Mar 03 '11 at 10:12
source share

The paragraph tag should contain text or, more precisely, inline elements. Chrome interprets the div inside p as an html error and tries to fix it, as well as it can.

+4
Mar 03 2018-11-23T00:
source share

I can't find a good source on this, so I could be wrong, but recently I read about how unclosed p tags are technically sound html (obviously not valid xhtml). Basically, in the right circumstances, they close, just like br or hr closes without an end tag. Even if they are not technically sound, they seem to get used so much that they are considered acceptable to less civilized people. Gross, I know.

I imagine what happens when Chrome sees your block element (div) after p, so it assumes that you intend p to close itself. I assume that viewing the finale of p causes the same action, because in Chrome there is currently no open poppy tag by the time it encounters the closing tag.

As a side note. If you hadn’t bothered to put the div in p, I would suggest reading why semantics are so important when it comes to html. I just looked through several articles - can I suggest this for a quick read? http://brainstormsandraves.com/articles/semantics/structure/

+1
03 Mar. 2018-11-23T00:
source share

Nesting div in p is invalid HTML. I would suggest that Chrome is just trying to fix it.

0
Mar 03 '11 at 10:01
source share


More articles:


All Articles