Displaying an element similar to p inside a span?

Question

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

<span>
    <p>this is the p</p>
</span>

This is not allowed according to the HTML5 specs. Now, my HTML is more complex than the above and I need something similar to a p which I can use instead. Which tag could I use or which element can I change using css so it behaves like a p?

Answer 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;.