How to use the tag span (HTML element)

In this article, we will learn how to use the tag span, what it is, the main uses and its importance in HTML/CSS

I often say that the span tag is like a <div>, applied only with an inline-block display, that is, on the same line as the other elements

This tag doesn’t give any semantic value to the document/project, it is null in this issue

This creates a certain responsibility when applying it, as it doesn’t mean anything to the page interpreters that rank your site on SEO

So basically the uses of span are:

To place two elements inline (but can be solved with CSS too, with other elements);
To style a portion of another element with CSS;
To manipulate the element with JavaScript;

The first point is easily worked around with CSS, so it’s not necessary for more advanced users/programmers.

There are others as interesting as well, let’s see an example of the second point

What is the span element/tag used for: practice with CSS

Check the following HTML and CSS structure:

<!-- HTML -->
<p>Este projeto vai ser feito com <span>PHP</span> no back-end e <span>HTML/CSS</span> no front-end.</p>

/* CSS */
p {
 padding: 10px;
 margin: 50px;
 font-family: Arial;
}

span {
 background-color: darkblue;
 color: yellow;
 padding: 5px;
 font-weight: bold;
}

This is the expected result:

You can notice that in this example, programming languages should be in evidence

For a predetermined reason, for example, languages change along with each project, so they must be highlighted in some way

Thus, the use of the span tag is appropriate in this case, but we must be careful with some points that we will see in the next section

Where the span tag should not be used

Of course nothing is prohibited in HTML/CSS, but some cases can be considered a bad practice or even a misuse, keep that in mind

I believe you shouldn’t use it for the case of emphasize or highlight the importance of a text

For example: you wish to highlight a word or phrase, but with semantic value on the page

In this specific case there are better alternatives, as it doesn’t span the semantics/SEO to the page

You can opt for the strong tag, for example, which came with version 5 of the HTML

And it applies precisely for this purpose, to give importance to some text portion on the page, inline too, and thus helping page interpreters to find parts or keywords in your text

Unless in this case, avoid using the span tag just because it doesn’t break lines in the HTML

Learn about the display property in CSS, as you can use the right tag instead of using the span tag for these cases

Conclusion

In this article we learned the uses of the span tag, my suggestion is to use it to style elements without semantically highlighting them

For the semantic purpose, we should choose proper tags for this, such as strong

And that’s it for today; see you on the next post!

Want to learn more about HTML, CSS and other web technologies? Click here!

How to use the tag span (HTML element)