one more empty P element?

alert(document.getElementById('hhh').children[2].outerHTML)

<h1 id = 'hhh'>
hhh1
<p id ="ppp"><p>para1</p>para2</p>
</h1>

Why h1 have 3 children ?

It should be 2, which are 2 P elements.

Why there's 1 more extra empty P elements ?