❮ Previous Next ❯

HTML <span> tag

The <span> tag defines a single text or group of texts which has special purpose for styling mainly using CSS or JavaScript. By default, using this element has no affect visually on the texts or any other characters.

Type: Inline Element

Syntax of <span> tag

<span>Text to be styled</span>

Full code example using style attribute

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
It is <span style="color:blue; font-style:italic; font-family:Arial">
styling text.
</span>
</p>
</body>
</html>
Run The code »

Output on the browser

It is styling text.

Full code example using id and class attributes

<!DOCTYPE html>
<html>
<head>
<style>
.className {
  color: blue;
  font-family: "Times New Roman";
  font-size: 1.1em;
}

#idName {
  color: green;
  font-family: Verdana;
  font-size: 1.2em;
}
</style>

</head>
<body>

<p>
  It is <span class="className">
    styling text using class attribute.
  </span>
  <br>

  It is <span id="idName">
    styling text using id attribute.
  </span>
</p>

</body>
</html>
Run The code »

Output on the browser

It is styling text using class attribute.
It is styling text using id attribute.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<span> Yes Yes Yes Yes Yes

More reference

The <span> tag is the best choice for styling text(s) within a paragraph or a sentence.
The <span> and the <span> tag are almost similar only the difference is <span> element is an inline-level element while the <div> is a block-level element.

❮ Previous Next ❯