HTML <span> Tag

Definition

The HTML <span> tag is a generic inline container which is used to group elements mainly for styling purposes. 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.

Here are some examples of the HTML <span> tag usage:

  • Highlight a part of a text with color, define a background color 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.

Let's see an example where we give a style just inside the tag.

Example of HTML <span> Tag:

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

Let's see another example where we added class attribute to the tag and gave styles to the content of the tag separately.

Example of HTML <span> Tag With the Class Attribute:

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

Attributes

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

Global Attributes are used to refer to attributes, which are used on any HTML element. These attributes are common for all elements in HTML.

An event occurs when a browser reacts to a particular user’s action. A user generates an event, when clicking on a mouse, uploading a document or an image, playing video, or performing any other action on a website.

How to style <span> tag

Common properties to alter the visual weight/emphasis/size of text in <span> tag:?

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick. CSS text-transform Property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style

Coloring text in <span> tag:

  • CSS color property describes the color of the text content and text decorations
  • CSS background-color property sets the background color of an element.

Text layout styles for <span> tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <span> tag


Browser support



Do you find this helpful?

Related articles