Place p inside span or force h:outputText to generate div around text
<p>In my project, I take raw text from user and send it to server to do the following</p>

<ul>
<li><p>decide what type of each word is</p></li>
<li><p>add a <code>span</code> around it with a related CSS class</p></li>
<li><p>keep the original text structure (i.e<code> \r\n</code> means paragraph-end so i can wrap it in a <code>p</code>)</p></li>
<li><p>display the result back to the user</p></li>
</ul>

<p>using </p>

<pre><code>&lt;h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" /&gt;
</code></pre>

<p>In short, I am doing all the html markup at server-side. The <code>return</code>ed result is something like this (of course as a long String, the result indented for readability): </p>

<pre class="lang-html prettyprint-override"><code>&lt;span&gt; &lt;!-- from h:outputText --&gt;
  &lt;p&gt; &lt;!-- the returned String coming from the Bean starts here --&gt;
    &lt;span class="interjection"&gt;Hello&lt;/span&gt;
    &lt;span class="noun"&gt;World&lt;/span&gt;
    !
  &lt;/p&gt;
  &lt;p&gt;
    &lt;span class="noun"&gt;Life&lt;/span&gt;
    &lt;span class="verb"&gt;is&lt;/span&gt;
    &lt;span class="adjective"&gt;beautiful&lt;/span&gt;
    .
  &lt;/p&gt; &lt;!-- the returned String coming from the Bean ends here --&gt;
&lt;/span&gt; &lt;!-- from h:outputText --&gt;
</code></pre>

<p>But <code>h:outputText</code> generates <code>span</code> element around the text. Even though I have seen no problems, so far. But, I have a feeling that it is not right as I read that in html it is illegal to place <code>p</code> inside <code>span</code>. </p>

<p>Is there any way to force <code>h:outputText</code> to generate <code>div</code> around the text coming from Bean or is there a legal/better way to accomplish this?</p>

<p>Here is a snip from Chrome's DevTool's element tab:
<a href="https://i.stack.imgur.com/iU3cc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iU3cc.png" alt="Chrome DevTools screenshot"></a></p>