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.