ADVERTISEMENT

What is Span in HTML? Span Tag in HTML

Telegram Group Join Now

ADVERTISEMENT

What is Span in HTML? Span Tag in HTML

Span Tag in HTML
Span Tag in HTML

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.

ADVERTISEMENT

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

 <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:

 
Span Tag in HTML
Span Tag in HTML
 

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

ADVERTISEMENT

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:

ADVERTISEMENT

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

The output, for now, would be:

ADVERTISEMENT

Span Tag in HTML
Span Tag in HTML

 

 

Then in CSS, paste the code below:

span{
  color:blue;
  }

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Your final output would be:

ADVERTISEMENT

 

ADVERTISEMENT

Span Tag in HTML
Span Tag in HTML
 

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.

ADVERTISEMENT

Thanks for reading! Do contact me via the methods below if you have to say anything

ADVERTISEMENT

written by @codingporium

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT