What exactly is `span` used for?

hey so i just started and everything is pretty straightforward but can someone elaborate on what <span is used for? I put in into the code but did not see any visual difference i know its meant to separate what you wrote from <p but i do not see that happening on the web page when i run the program

31 Likes

Hopefully this quick video helps to explain this in-depth!

186 Likes

<span> has no physical appearance.

It is like the <p> tag in that it is intended for displaying text, but unlike it in that it does not start a new line. (in other words, it is inline)

<span> is mainly used to help you once you get to CSS so that you can style one part of a paragraph differently than the rest.

It is also used as an element that is only there to let you style the contents.

I hope that answers your question!

244 Likes

how do you use in css? Do you have to attribute and İD or a class to the tag?

Yeah, you’d probably use an element ID or class. You could target all elements, but that probably would get more than what you’re wanting to target.

4 Likes

can you have a span within a span? How this is used?

3 Likes

THANKS…GOT IT :slight_smile:

1 Like

This is very helpful, thanks!

1 Like

2 posts were split to a new topic: Styling span tags

:handshake: thanks @oduffy

you can use it to insert inline CSS, e.g. Important

Go Maggie!
Thanks Oduffy!

I don’t think that’s a good solution for people that don’t know even what’s <li></li>. I would stick with the solution of the hat user.
Another recommmendation I would suggest is to zoom the tutorials.
Also, why the videos are on hidden mode? You could make it public and not only can visualize it when you are register on Codeacademy :man_shrugging:

2 Likes

Thanks for sharing this video!

However, I still have a query. I get that <span> is useful for styling a small part of the text when used in conjunction with CSS. But two of the examples in the video (changing the colours of items on a list, and making certain words bold and italic in a paragraph) are cases where we can use simpler tags – in this case, the <font colour> , <b> and <i> tags respectively – to get the same results. Isn’t the use of span for these purposes unnecessarily complicating the coding? Why would we use, say, <span style="font-weight: bold" when we can just use <b>?

4 Likes

So when we simply use the < b > tag , it would just be bold. But adding CSS help us to choose the boldness, color of the text, font style, the depth of color and so on. That is the whole purpose of CSS.

Thank you for sharing this video! I can finally say that I understand the use of < span > :grinning:

This was such a great video! Provided so much context. Thank you so much!

Thanks! Simple, straightforward answer!!!