Span Tag In HTML: The Easy Facts You Need To Know

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:6 mins read
You are currently viewing Span Tag In HTML: The Easy Facts You Need To Know

Span tag in HTML was introduced in HTML 4. In this post, you are going to learn what is span tag, why developers use this tag, and also real examples with span tags.

The span tag represents an inline section in the document. It is used when no other semantic element is available. It can be also used for grouping elements. Basically, the span tag used to add style and javascript event for a specific part of an element.

This tag does not affect the appearance of an element. It can be fit anywhere in the document. This tag does not support the width and height property. The major difference between with div tag is span tag is an inline element and the div tag is a block-level element.

Span Tag in HTML

  • Used to add specific style and javascript events.
  • Does not affect the appearance of an element.
  • Can be used multiple times under an element.

HTML Span Tag – Syntax

Span tag in HTML comes in pairs, it start with <span> opening tag and closed with </span> closing tag.

Example

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>Lorem ipsum <span style="color:red;">dolor</span> sit amet.</p>
</body>
</html>

Result

Lorem ipsum dolor sit amet.

Does’t Affect Appearance

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p><span>Lorem</span> ipsum <span>dolor</span> sit amet.</p>
</body>
</html>

Result

Lorem ipsum dolor sit amet.

Span Tag With CSS

<!DOCTYPE html>
<html>
<head>
<style>
.color{
   color:blue;
}
.bg-color{
   background-color:yellow;
}
</style>
</head>
<body>
<h5><span id="color">Lerem</span> Ipsum</h5>
<p>Lorem ipsum <span id="bg-color">dolor</span> sit amet.</p>
</body>
</html>

Result

Lerem Ipsum

Lorem ipsum dolor sit amet.

Span Tag with JavaScript

<!DOCTYPE html>
<html>
<head>
<script>
 function ChangeColor(){
 document.getElementById("color").style.color=
"green";
    }
 </script>
<style>
</style>
</head>
<body>
<h5><span id="color">Lerem</span> Ipsum</h5>
<button type="button" onclick="ChangeColor()">Change Color</button>
</body>
</html>

Result

Lerem Ipsum

Difference Between Div and Span Tag

Here are little differences between div tag and span tag. This two tags are container tag these tags are mostly used to contain group of elements. Div tag is a block-level element and the span tag is inline element. Span tag don’t affect appearance of the content.

So, the major differences between div tag and span tag is div is a block level element and span is an inline element

<p><div>This</div> <div>is</div> a <div>paragraph</div></p>
<p><span>This</span> <span>is</span> a <span>paragraph</span></p>

Result

This
is a
paragraph

This is a paragraph

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply