Table of Contents

What is span in html | html span tag full explanation

What is a span in html?

A span tag is actually kind of different from a div tag. Before continuing, do read the article about div in our blog here by searching it. Span is an inline container used to mark a part of some text to be styled or any other element.

Just like div tag, we can easily style span parts using CSS or JavaScript by assigning it a class or ID attribute. We can use span as an inline container to separate many types of HTML elements in our website. Now let’s see some examples of span tags for better understandings.

html Span in Text

Now let’s first see how span works for text. First paste this simple code block in your HTML file:

 <span>welcome to codewithrandom blog</span>
 <span>welcome to codewithrandom blog</span>
 <span>welcome to codewithrandom blog</span>

Let’s see the output of this easy code block:

As you can see, when span sentences are added to our code, all sentences appear in one straight line without a line break. This shows easily that a span is like an inline container and in this example, it makes all sentences align in one straight line.

We will now see why I mentioned earlier that span is easy to style in our CSS code or to add functionality in JavaScript code.

html span – style Easily

So now we are going to give span tags in a part of a sentence and style them easily with CSS. We can also use ID if you want compared to class but it depends on how you’re going to use this element in your project.
First, paste the code below in your HTML file:

  Hello and welcome to <span>CodeWithRandom</span> Blog!

The output, for now, would be:

Then in CSS, paste the code below:

 span{
  color:blue;
  }

Your final output would be:

Generally, span is used to style parts of text or other creative projects as it is easy to do so with span. I hope this article gives you some good clarity on what is a span and how you can use it to make your coding smoother, easier, and much better.