When to use `span` over `p`?
I feel like I've gone full circle 😂
Semantically,
p
is for... paragraphs.
So if I just have a sentence of text, should that be within a span
? Would you still put it in p
?10 Replies
span - an inline span of text with absolutely no semanting meaning at all
p - paragraph - a whole block of (supposedly) text, that is semantically related
when to use each? depends on what you want to do
a sentence can be in a <p> or a <span> - without actual context, it might probably go in the <p> but it's valid in both
and i mean both: a <span> can go inside a <p> and can go inside a <span>
Yea but a sentence isn't a paragraph so wouldn't it make more sense to put it in a span?
And putting a p inside a span wouldn't make sense to me because a paragraph is multiple lines (block-level element) and a span should be an inline element (otherwise you should use a div)
Paragraphs are block-level, semantically relevant elements. Spans are inline-level, semantically empty elements.
Basic text belongs in a
p
element because that’s what it’s for. span
is for when you want to add styles to a specific part of a paragraph.no.
<--- there, a paragrapha sentence isn’t a paragraphThis is false
you cant put a <p> inside a <span> - use a <div> instead
A paragraph can be between one and a bajillion words long.
a paragraph is exactly what you learn in 1st grade: no magic to it
a <span> is basically just a piece of text, zero or a bajillion characters long
but all it does is ... nothing
just like a div: it just divides stuff, with no semantic meaning
spans are useful for icons, or letting you define an element where you can show other text inside
Oh I thought that's what you were saying
I honestly thought a paragraph was like multiple lines long 😂
That's why I made this question
I was like well a sentence isn't a paragraph so it's not very semantic lol
a paragraph contains 1 or more sentences, and 1 sentence contains 1 or more words
it's exactly like how you did for school