Displaying An Element Similar To P Inside A Span?

I have a span with an inculded p, like this:

this is the p

This is not allowed according to the HTML5 specs. Now, my HTML is more

Solution 1:

p has a meaning.

If your content matches p’s definition, you should use p. Then you should use a div instead of a span (unless there is no other suitable candidate):

<div>
  <p>…</p>
</div>

If your content doesn’t match p’s definition, you shouldn’t use p. Then you could use span instead of p (if there is no other suitable candidate):

<span>
  <span>…</span>
</span>

span and div don’t have meanings. So you only have to consider where they are placed syntactically (block vs. inline). You can swap them without losing/changing any semantics:

<div>
  <span>…</span>
</div>

<div>
  <div>…</div>
</div>

Note that all this doesn’t have anything to do with how these elements are styled. You can style a block-level element with CSS so that it appears as inline and vice-versa: display:inline; resp. display:block;.