I'm somewhat new to HTML and don't really understand the point of a <span>

I am somewhat new to coding. I took a class on HTML in school this year, but I regret not paying too much attention during the class, otherwise, I may not have this question. I don’t really understand the point of a span in HTML. One of the more practice courses, on “Making websites for your business” tells you about span’s but I don’t understand. Please help me to understand what the point of a span is in the picture below:

2 Likes

Hi there,

So, <span> is a generic inline element. It doesn’t inherently represent anything. <span> (like <div>) is something to be used when grouping items together for styling. Though I would refer to semantic uses first (before defaulting to <div> or <span>).

Take for example:

<p>Brushes, rollers, and buckets <span class="price">starting at $3</span></p>
<p>Paint, oils, spray cans <span class="price">starting at $5</span></p>
p {
  color: red;
}

span.price {
 color: blue;
}

In this context, the words in <p> are colored red–but the <span> is used to color text within or inline with the <p> blue.

Does that make sense?

6 Likes

Hello! Thank you for helping me. Yes, this does make sense. Thank you for taking your time to write a response to me!

1 Like

Hey there. I had the same question and this was really enlightening. Thanks a lot!

2 Likes

Alhamdulillah thanks for answer,