php - contents inside p element wraps outside the element

Question

I am using the following code in php application.

<p class="foo"><?php echo $foo->data; ?></p>

Which is rendered in the browser like below:

<p class="foo"></p>
<p>foo dataription here</p>
<p></p>

But if I use just like this:

<?php echo $foo->data; ?>

Then, it correctly renders the DOM element like this:

<p>foo description here</p>

Why doen't <p class="foo"><?php echo $foo->data; ?></p> doesn't renders like below?

<p class="foo">foo description here</p>

Answer 1

I noticed that $foo->data carries the html tag with <p>. But any block level element like div or p cannot reside within p element.

Thus,

<p class="foo">
   <p>foo description here</p>
</p>

is rendered by browser like this:

<p class="foo"></p>
<p>foo description here</p>
<p></p>

As it's unwrapping the block level element i.e. p element outside the p.foo element. It's just because we cannot nest any block level element within p element semantically.

So, be careful when you're inserting any content inside p element to assure that there's no any block level element within p element.

p element can only contain the phrasing content.

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. They are:

a, abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Text

Hope, this helps for further users.