Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Kailash Seshadri
Kailash Seshadri
3,087 Points

<span> VS <p>

what is the difference between the span element and the p element?

4 Answers

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points

span is an in-line element and "p" is a block element.

If you are not sure what are inline elements and block elements.

The simple definition would be block elements take up the whole width of the page(apart from margins)

and inline elements on the other hand takes as much space as they need.

Head over to this page Demo

Notice, when you change the display property how background color behaves. When it's block, it will take up the whole space but on the other hand when it's an inline element, it is different.

Kailash Seshadri
Kailash Seshadri
3,087 Points

So span and p do the same thing but span is inline and p is block right?

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points

Well answer to your question is yes and no,What I mean by that is "p" is a block level tag for paragraphs. "span" is a line level tag that in and of itself doesn't do anything, but is useful for defining a specific style to a string. "span" can be used within "p", but "p" cannot be used within "span".

For better understanding, experiment with these elements and You'll see the difference and I would suggest add background-colors while experimenting, then you can easily see what's happening exactly.

and 1 thing I would like to pint out as well.Lets take a "div" element as well now(div is a block element as well) (Don't overthink on this part for now) These elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p.

Kailash Seshadri
Kailash Seshadri
3,087 Points

Thanks Tushar I understand now.. but I can't seem to wrap my head around the part of your answer where you say 'span can be used within p, but p cannot be used within span'

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

See it's not like you will get a syntax error when you'll use p inside a span. But as I'm sure you have understood the difference between block and inline elements, now just think when you create a span(inline element) and place a p(block) inside the span.What will happen? You just created a block element inside the inline element and it defeats the purpose of why You chose span element in the first place.You chose span because you don't want a whole block to take up the space

I know it seems a bit confusing. I just created a kind of demo to demonstrate what I mean by that. Check this out http://codepen.io/tushar_13/pen/LNQGRx

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

For full view http://codepen.io/tushar_13/full/LNQGRx/

Now see the difference between the two things , I've added background colors so that You can easily see what's happening and make sure you see the code as well.

If you still have any doubt, change my code, play with it. Do whatever you want to clear your doubts. If you have any questions after this, well you know how to reach me!

Kailash Seshadri
Kailash Seshadri
3,087 Points

OK that makes sense now thanks a lot for your help!!

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

No problem bro, I'm glad you asked the right question not just an answer for the code challenge.

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

While we are at it, You think you can understand margin and padding and work with them?

Kailash Seshadri
Kailash Seshadri
3,087 Points

yes i can understand and work with margin and padding. thanks

also more extra information is <span> using for do anything be inline with text or in the same line not break to new line also <p> is for paragraph reasons as you know from tushar singh answer.

Konrad Pilch
Konrad Pilch
2,435 Points

P is also made for paragraphs, as well as h1-h6 are made for heaings, same as aside is made for sidebar etc.. it helps the browser to recognize is and make some adjustmes or something. Is more browser friendly.