HTML <span> Tag

The <span> tag, as well as <div> tag are empty containers. The <div> tag groups block level elements, whereas the <span> groups inline elements. The content hooked in the <span> element, can be styled with CSS, or manipulated with JavaScript.

The <span> tag is used to:
  • Highlight a part of a text with a color, define a background or background image for it.
  • Change the font of separate words or phrases.
  • Apply scripts to exact parts of the text, for example highlight the syntax of the code, etc.

The <span> tag doesn’t provide any visual change to the elements and doesn’t have semantic meaning.

Syntax

The <span> tag comes in pairs. The content is written between opening (<span>) and closing (</span>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
  </body>
</html>

In this example we gave styles just inside the tag.

Result

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>   
      .letter { 
      color: red; 
      font-size: 300%; /* Font size in percents */ 
      position: relative; /* Relative positioning */ 
      top: 7px; /* Move from above */ 
    </style>
  </head>
  <body>
    <p><span class="letter">О</span>She brought in disgusting, disturbing yellow flowers in her hands. And these flowers stood out on her black coat.</p>
    <p>Michael Bulgakov</p>
  </body>
</html>

In this example we added class attribute to the tag and gave styles to the content of the tag separately.

Result

Attributes

The <span> tag supports the Global attributes and the Event Attributes.

Browser support