Why this "

" is shown strange in DOM?

Question

When you put <p><div></br></div></p> into body, you will get the strange DOM structure like:

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

Why does this happened? It seems that when <p> contains a block element this will happen.

I don't think that's a duplicate. Q:"Why is `
` weird?" - A:"Because that's invalid". "Why is that invalid?" looks like another question. By the way, is the browser *required* by the spec to split the `
` tag? — Kobi, Aug 21 '13 at 07:24

score 8 · Answer 1 · edited May 23 '17 at 12:02

8

According to the spec, p cannot have nested block elements, so the HTML parser automatically closes it before the div when building the DOM.

edited May 23 '17 at 12:02

Community

1
1

answered Aug 21 '13 at 07:14

Thilo

257,207
101
511
656

score 3 · Answer 2 · answered Aug 21 '13 at 07:14

p cannot hold a div as it's a block level element, p can only hold inline elements, so what you are trying is incorrect.

You can use span instead and use display: block; or display: inline-block; in your CSS which will give you same effect and also it is completely acceptable as p can hold a span as it's an inline element.

Why this "" is shown strange in DOM?

2 Answers2

Why this "

" is shown strange in DOM?