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?

The p tag can be implicitly closed by the use of other tags; see [this](https://stackoverflow.com/questions/8460993/p-end-tag-p-is-not-needed-in-html) question — csunday95, Apr 24 '19 at 22:23
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags — Witold Kaczurba, Apr 28 '19 at 20:59

iosepa · Answer 1 · 2019-04-24T22:47:16.710

10

The <pre> tag is a block level element. When that is placed inside the ... it will act like a  causing it to close and throwing an error when it gets to your . Either close the  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

edited Apr 24 '19 at 22:47

answered Apr 24 '19 at 22:35

iosepa

381
1
8

Is there any work around the end result is not formatted well. – Peter Penzov Apr 24 '19 at 22:39
How do you want it formatted?
is used to make the text appear as is.
– iosepa Apr 24 '19 at 22:42
Yes, pre> is used to make the text inside formatted – Peter Penzov Apr 24 '19 at 22:45

Witold Kaczurba · Answer 2 · 2019-04-28T20:59:00.747

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

score 0 · Answer 3 · edited Apr 24 '19 at 22:42

0

From html.com:

The closing  tag is optional and is implied by the opening tag of the next HTML element encountered in an HTML document after an opening  tag.

edited Apr 24 '19 at 22:42

John Montgomery

6,739
9
52
68

answered Apr 24 '19 at 22:25

csunday95

1,279
10
18

remove the closing tag? does that generate any exceptions? – csunday95 Apr 24 '19 at 22:33

Template parse errors: Unexpected closing tag "p"

3 Answers3