Menu
Get an empty HTML, type in this and see its source code on Google Chrome:
<p><div> </div>WHY?</p>
If you did it like I did, you'll see this in the source:
<html>
<head></head><body><p> </p><div> </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. This 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?
796
The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element.
Technically this is optional, but it's good practice to include the closing tag to ensure your document validates. By default, most browsers place a line break and a blank line between paragraphs.
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.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
