CODEWITHSUNDEEP
csshtml
user1856596
user1856596

Reputation: 7243

Displaying an element similar to p inside a span?

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?

Upvotes: 11

Views: 29457

Answers (1)

unor
unor

Reputation: 96737

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

Upvotes: 20

Related Questions