HTML <span> tag

Use of <span> tag

The <span> tag defines single text or group of texts which has special purposes for styling mainly with CSS or JavaScript. For example, it can be used to change of font-size or font-color etc. of separate text or separate word within a sentence.
Normally, <span> element has no visual effect on the texts or any other characters and it also does not have any semantic meaning. <span> element has now been the best choice for styling characters with CSS out of the inline level element.
The <div> tag and the <span> tag are almost similar in their respective functions only the differences is <div> is block element while the <span> element is inline element.

Example of <span> tag

<span style = "color:red"> Red texts </span>

Supported Browsers

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<span> Yes Yes Yes Yes Yes

Full Code Example

The content of the <span> element can be styled in two ways:
i) By using style attribute to the <span> on tag
ii) By using id or class attribute to the <span> on tag.

By using style attribute to the <span> on tag

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style = "color:blue;font-style:italic;font-family:Arial"> It is the CSS styling text. </span>
</body>
</html>

Output

It is the CSS styling text.

By using class or id attribute to the <span> on tag

<!DOCTYPE html>
<html>
<head>
<style>
.type1 {
color:blue;
font-family:Times New Roman;
font-size:2em;
}
#type2 {
color:green;
font-family:Verdana;
font-size:1.5em;
}
</style>
</head>
<body>
<p>
<span class="type1"> It is the CSS styling text. </span> <br>
<span id="type2"> It is the CSS styling text. </span>
</p>
</body>
</html>

Output

It is the CSS styling text.
It is the CSS styling text.