Putting inside is adding an extra [duplicate]

by

From the fine specification:

p – paragraph

[…]

Permitted contents

Phrasing content

And what is this Phrasing content?

Phrasing content:

Consists of phrasing elements intermixed with normal character data.

Normal character data is just that: unmarked up text. Phrasing elements are:

a or em or strong … [a bunch of other elements none of which are div]

So, <p><div></div></p> is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:

<p></p><div></div><p></p>

You can’t put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you want.

Your reference at about.com disagrees with the specification at w3.org. Your reference is misleading you.

More Related Contents:

  1. Is any way that is safe to display videos in a browser
  2. Schema.org/Microdata markup for list of recent posts without providing “author” / “publisher”?
  3. Google fonts URL break HTML5 Validation on w3.org
  4. What does the shrink-to-fit viewport meta attribute do?
  5. Fixed footer in Bootstrap
  6. min-height does not work with body
  7. CSS On hover show another element
  8. How do I avoid a page break immediately after a heading
  9. Emulate IE7 for IE8 but not for IE9 using “X-UA-Compatible”
  10. Button type “button” vs. “submit” [duplicate]
  11. Can flexbox detect when a flex item wraps?
  12. CSS replacement for
  13. How do I make an file play continuously on all pages?
  14. What’s the point of valid CSS/HTML?
  15. What is the best way to replace the file browse button in html?
  16. getHTTP with (Excel) VBA?
  17. CSS triangle containing text
  18. Why does display: inline-block; remove an underline from a child element?
  19. What is the box-sizing property for in CSS?
  20. CSS margin pushing the body element
  21. Bootstrap 4 collapsing two navbars into one toggle button
  22. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  23. White space under image [duplicate]
  24. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  25. Using HTML anchor link fragment in Angular 6
  26. Sending HTML mail using a shell script
  27. How to reset ReactJS file input
  28. Is it bad design to use table tags when displaying forms in html?
  29. How can I include special characters in query strings?
  30. Make floating divs the same height

Leave a Comment