What is a Span Tag in html?

A Span Tag in HTML 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 a 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 understanding.

Html Span Span Tag in Text

Now let’s first see how span works for text. First, paste this simple code block into 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.

5+ HTML CSS Projects With Source Code

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 Tag style Using CSS

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 into 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;
  }