Can I embed <PRE> tag into tag?

why are there two elements of  when i use only one  tag?

if <center> tag is instead of <pre>,the result is the same.

if  tag is instead of <pre>,the result of a.length is 1.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
  <p><pre>name: id:</pre></p>
<script>
  a = document.getElementsByTagName("p");
  document.write("LEN:"+a.length+"<BR>");
  for(i=0;i<a.length;i++){
    document.write(a[i].innerHTML+"<BR>");
  }
</script>

Solution

<pre> cannot be inside . Thus, when the HTML parser encounters <pre> inside , it will close  first. Then it encounters , a closing tag without an opening tag, and assumes you wanted . The resulting structure is:

<p></p>
<pre>...</pre>
<p></p>

How do you know <pre> cannot be inside ? See  on MDN, or even better in HTML spec, and notice "Permitted content: Phrasing content". Looking at what "phrasing content" is, you can see that it does not include <pre>.

Can I embed <PRE> tag into <P> tag?