HTML <span> tag explained

Reading time: 20 minutes | Coding time: 5 minutes

Span tag in HTML is an inline element which can be used to apply special styling (using CSS) or behaviour (using JavaScript) to a specific component in a div, p and other tags.

The meaning of "span" in English is the full extent of something form end to end or the amount of space that something covers. This is literally what HTML <span> is.

span is similar to all the other HTML elements, it starts with an opening tag <span> and ends with an closing tag </span>. The content ( text, links, images etc.) lies between these opening and closing tags.

Example:

<div>
    <p style="color:green"> This is a beautiful composition of words.</p>
    <p style="color:green"> This is a <span>beautiful</span> composition of words.</p>
</div>

Output:

As you can see in the above example, we used span around the word beautiful in the second line but not in the first line. Still the output is similar.

Why ???

Both the lines look similar because span is an inline element. It only takes space equal to its content. It does not break the line.

Lets add a background-color : cyan style to the span element and see what happens -

<div>
    <p style="color:green"> This is a beautiful composition of words.</p>
    <p style="color:green"> This is a <span style="background-color:cyan">beautiful</span> composition of words.</p>
</div>

Output:

Now things getting more clear as you can see span just covers the word beautiful, nothing more nothing less and the text after <span>beautiful</span> continues on the same line. Thats why it is an inline element.

When to use span tag ?

• span is generally used when it is needed to style some specific part of any text-line or any paragraph.

• It is used when you want to add ablock for some element but don't want to break the line. So in space of div, span is used and you get the desired result.

• span is similar to other HTML elements and you add custom style to it with the help of inline styles or classes/ids.

  • Example - You can put a link between span tags and style with custom css by adding some padding ,shadows, changing colors and make it look like a button.

Lets sum up everything explained above and make a link which will take you to the MDN ( Mozilla Developer Network ) documentation of <span>. We will custom style our link with some css.

HTML

<p> Both the lines look similar because span is an inline element. It only takes space equal to its content. It does not break the line.
    Go to the 
    <span class="custom-btn">
        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span" target="_blank">Documentation</a></span> to read more about span element.
</p>

CSS

.custom-btn {
  background-color: crimson;
  padding: 1px 2px 3px 2px;
  border-radius : 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5)
}

.custom-btn a {
  text-decoration: none;
  color: white;
  margin: 4px;
  padding: 2px;
}

RESULT

Check out live-demo here and play with code.

In the above example, I put the link inside span tag and gave it a class named custom-btn and wrote some css for that class.

This way now you get a reusable style. Now if you want to make some other link look exactly the same , all you have to do is wrap that link with <span> </span> and add the that same class to span <span class"custom-btn"> and thats it. This way you get more control over your code and styles.

With this, you have the complete knowledge of using span tag in HTML.