DIV tag inside of P looking weird in the DOM tree

Question

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:

screen shot of DOM Tree using Chrome's Dev Tools

Maybe I'm having a brain fart, but shouldn't the DIV be inside of the P tag?

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

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.

edited May 23 '17 at 10:25

Community

1
1

answered Nov 22 '13 at 00:53

NSjonas

10,693
9
66
92

Awesome. I figured that was the case and that it was covered somewhere in the spec but I couldn't find it or a SO question related to it. Thanks! – Spencer Carnage Nov 22 '13 at 01:54

DIV tag inside of P looking weird in the DOM tree

1 Answers1