Browser behaves strangely when loading HTML from MySQL database into a contenteditable tag

Question

I have a simple code in my php file like this:

echo "<p id='additional-info' contenteditable='true'>".$tag_data->additional_info."</p>";

$tag_data->additional_info is data that gets loaded from the database. The data I am trying to load in this case is very simple, it is:

line 1 <p>line 2</p><p>line 3</p>

Now this is where the problem arises, I would expect the browser (Google Chrome in my case) to output this as such:

echo "<p id='additional-info' contenteditable='true'>line 1 <p>line 2</p><p>line 3</p></p>";

But instead, for some reason it outputs this:

<p id="additional-info" contenteditable="true">line 1 </p>
<p>line 2</p>
<p>line 3</p>
<p></p>

Does anybody know what the problem could be?

Answer 1

Have a look here -> P element according to it :

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

So that's Chrome displays it in this way.

Not sure what your idea is but you may want to use a <div class="text">...</div> and apply any appropriate styling.

EDIT: Have a further look at this answer has a a list of elements allowed inside P tag [HTML5]