DIV tag inside of P looking weird in the DOM tree
Looking at any web inspector, the following markup is outputting unexpected (at least to me) results:
<p> <div>Here's a div!</div> And here's some text. <div>Here's another div!</div> </p>
Using Chrome's Dev Tools, I'm seeing the DOM tree look like this:
Maybe I'm having a brain fart, but shouldn't the DIV be inside of the P tag?
It is not valid html to put a <div> inside a <p>. The <p> element is only meant to include inline elements. <div> is a block element. See section 9.3.1 of the HTML Specification for more info.
Chrome will sometimes rewrite bad HTML to be valid.
Here is a related/duplicate question.