Why is this "<p> <div> <br> </div> </p>" shown strange in the DOM?

Question

When you put <p><div></br></div></p> in the body, you will get a strange DOM structure, for example:

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

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

Answer 1

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

Answer 2

p cannot contain a div as an element of the block level, p can only contain inline elements, so what you are trying is wrong.

Instead, you can use span and use display: block; or display: inline-block; in its CSS, which will give you the same effect, and is also quite acceptable, since p may contain a span , since it is an inline element.