Template parse errors: Unexpected closing tag "p"

Question

I want to format XML file in Angular. I tried this:

<div class="element-box">
  <div class="details-wrapper">
    <p><b class="label">Raw Request</b>
      <pre>
        {{apiattempt.raw_request | xmlBeautyfier }}
      </pre>
    </p>
  </div>
</div>

But I get this error:

ERROR in : Template parse errors:
Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
        {{apiattempt.raw_request | xmlBeautyfier }}
      </pre>
    [ERROR ->]</p>
    <p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
  </div"): 

Do you know how I can fix this?

Answer 1

The <pre> tag is a block level element. When that is placed inside the <p>...</p> it will act like a </p> causing it to close and throwing an error when it gets to your </p>. Either close the <p> before your <pre> or wrap the pre in a different element if you want it wrapped.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Answer 2

Refer to: https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

In HTML: p tag is implicity closed with next element. So

• the first p tag starts p and ends with b or pre tag. (it is implicitly closed).
• then then the parser finds /p closing tag for which it doesnt see the preceding p tag. (the first one was implicitly closed).

Solutions (from best the worst):

• dont use p when you do more tricky stuff. You have pre tag so you should consider changing your original p with div or span
• OR drop /p (ok idea)
• OR add p in the front of /p. (bad idea to have there /p ..)

Possible solution to investigate: - XHTML requires explicit closing p tag. You can try to use XHTML and let us know if it works. Note: this is a bit of an overkill to your problem... bit always good to learn ;-)

Hope this helps