The HTML <span> tag is a vital tool in the HTML toolkit. This tag helps to group, style, and manipulate inline elements on a web page during design and run time.

This brief tutorial will help you to learn more about the HTML <span> tag and its common usages.

What is the HTML <span> tag?

In essence, the <span> tag in HTML is an inline container for inline elements. It doesn’t start a new line and takes as much space as required. It can’t contain any block element and doesn’t cause any visible change on the screen.

<span> is a paired tag. The syntax of the HTML <span> tag is as below:

<span> Any Inline Element </span>!!

Here comes an example -

<span> Hello  World!! </span>

The HTML <span> tag doesn’t have any mandatory attributes. General attributes such as id, class, style work fine with it, but you can also use it even without any attributes.

All major browsers support usage of the HTML <span> tag. Examples include Chrome, Internet Explorer, Edge, Safari, Opera.

The next few sections will guide you to learn how to make the best of this tag.

How to use to style an inline element with CSS

You can use the HTML <span> tag to apply an inline CSS to an inline element.

Consider you have to change the color of a word in a sentence.

To solve this task you can use wrap this word in the HTML span tag and happy any CSS you wish to it.

For example, let’s change the color of the word, “sun” to red and make it bold using inline CSS styles.

<!DOCTYPE html>
<html>
   <body>

     <p> The <span style="color:red; font-weight:bold">sun</span> rises in the east </p>
      
    </body>
</html>

As a result the word sun will turn red and will be displayed in bold.

How to use CSS class selector with HTML <span> tag

If you don’t want to use the inline CSS styles, you can add a CSS class to the <span> tag and use a CSS class selector.

The HTML Source Code

<!DOCTYPE html>
<html>
   <body>

     <p> The <span class="textChange">sun</span> rises in the east </p>
      
    </body>
</html>

The CSS source code

.textChange {
  color: red; // Changes font color to red
  font-width: bold; // Makes the font bold
}

Here, we’ve assigned a CSS class textChange to the HTML <span> tag, that wraps the word “sun”. Then the CSS source code finds the word using the class selector .textChage and makes it red and bold.

In the end you’ll get absolutely the same behavior as with the inline CSS styles.

How to use to manipulate an inline element with JavaScript

The HTML <span> tag is a great aid you can use with Javascript to change UI elements during run time.

The <span> tag allows you to associate an inline element with a CSS selector. Then you use JavaScript uses to manipulate the element during run time. Examples of such CSS selectors are id or class.

Here comes a simple example to help you to grasp the concept real quick.

Let’s consider, you have a sentence, “He is strong, brave and, above all, kind”. You need to change the word “brave” to have all uppercase characters. This change should happen during run time.

The below coding sample shows how can you solve it. It uses JavaScript and an HTML <span> tag.

The HTML Source Code

<!DOCTYPE html>
<html lang="en">
   <head>
  
    <title> A Sample Web Page </title>
    
   </head>
   <body>
    
   <p>He is strong, <span class="uCase">brave</span> and, above all, kind</p>
    
    <script src="/script.js"></script>
  </body>
</html>

The JavaScript source code

//Accessing the inline element using a class
var obj = document.querySelector(".uCase");

//Applying the style on the inline element
obj.style.textTransform = "uppercase";

Technical explanation and expected output

In this example, we’ve added assigns a CSS class uCase to the the HTML <span> tag. When the browser loads the HTML, it triggers the JavaScript source code. The JavaScript source code finds the word using the class, uCase and changes its characters to uppercase characters with obj.style.textTransform = "uppercase".

Here’s what you’ll see in a browser:

He is strong, BRAVE and, above all, kind

Conclusion

Let’s recap what you have learned about the HTML <span> tag in this tutorial:

  • You can use the HTML <span> tag as a container for inline elements
  • The HTML <span> tag itself an inline element
  • This tag helps you to style or manipulate internal inline elements or their parts
  • You can apply CSS or JavaScript to the HTML <span> tag to make these changes during design or run time

I’ve shown you some examples of how you can use the <span>. But it’s all theory until you do it yourself! Move on and solidify everything you learned in practice.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript