Displaying an element similar to p inside a span?

css, html

Solution

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

Problem

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?

Original source