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

Matthew Francis
Matthew Francis
6,967 Points

Should you use <span> when you have a sentence?

Say you want it to be inline too!

or should you use <p> and then modify it with display: inline? Which is better practice or does it not matter?

3 Answers

Steven Parker
Steven Parker
231,261 Points

The "p" element is specifically for paragraphs, where "span" has no semantic meaning.

So to enclose something other than a paragraph for styling purposes, "span" would be a better choice, particularly if you wanted it to be inline mode.

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points

Hey Matthew!

Both Jamie and Steven gave great advice. I might also suggest that if you're ever stuck with a thought like this, remember there are very few cases when you should have to fight an element's default behaviour.

In this case for example, a <p> tag is a block level element (as you know), so, even though it might technically work, you shouldn't have to fight its default behaviour by changing it to an inline style. Using a <span> tag here in the way that Jamie and Steven described makes the most sense, and we know this because there's no modification required to the element :)

Great question! Just remember to keep it simple for yourself

-Jake

Jamie Campbell
PLUS
Jamie Campbell
Courses Plus Student 7,603 Points

It depends on what you want it to look like. <span> is more for visual effects, for example a quote you want to stand out, while <p> display: inline is used specifically to format the text.