HTML Span: A Guide for Beginners

The HTML <span> tag lets you apply styles to a part of a web page or a paragraph. It is often used to stylize the text in a paragraph, such as by changing the color of a word. The <span> tag by default has no styles.

When you’re programming in HTML, you may decide you want to style something specific on your web page. For instance, you may want to emphasize a certain word in a sentence or a specific link in a list of links.

That’s where the HTML <span> tag comes in. <span> is a generic inline container that allows you to phrase content on a web document. The <span> tag is commonly used for styling purposes—especially for styling text.

This tutorial will discuss, with examples, how to use HTML <span> to style elements on a web page. By the end of reading this tutorial, you’ll be an expert at using the HTML <span> tag.

HTML <span> Tag

The HTML <span> tag manipulates part of a web page. It is often used inside a <p> element to apply styles to a specific part of a paragraph. For instance, you could use <span> to change the color of a word in a paragraph.

By itself, the <span> tag has no default rendering or values. This means that if you use the tag without any attributes, it will have no effect on how your web page is rendered.

The <span> tag is often used with CSS to apply a certain style to a specific element or elements on a web page. <span> makes it easy for you to apply a certain style to multiple elements on a web page all at once.

HTML <span> Syntax

The HTML Span tag has both an opening (<span>) and a closing (</span>) element. We can use the following syntax to use the <span> tag:

<span></span>

The HTML <span> tag has no tag-specific attributes. For instance, the <img> tag has “height” and “width” as tag-specific attributes. <span> has none of these types of attributes because it relies on CSS for styling. The <span> tag supports all global HTML attributes.

You can think of the <span> tag as similar to <div> in that <span> does not have any specific styles itself. But, <div> tags are used to define sections and blocks of a text because <div> is a block element. <span> is used to apply styles to specific parts of a document, such as a paragraph.

In the following section, we will walk through a few examples that illustrate how the <span> tag works in HTML.

<span> Tag HTML Examples

Let’s walk through a few examples of code that uses the <span> tag to style inline elements in HTML. Our first example will use the <span> tag in a paragraph; our second example will use it in a list.

<span> HTML in a paragraph

Suppose we are designing a web page for a local bakery—Pringle and Sons Bakery. This web page will outline the history of the bakery. The owner of the bakery, Mr. Pringle, asked us to emphasize certain key facts with red text.

We could use the following code to accomplish this task:

index.html

<p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p>

styles.css

.redText {
color: red;
}

Our code returns:

In our example, we emphasized the terms “delicious baked goods” and “thousands”. Mr. Pringle told us these terms are important, so we directed the program to display them in red.

We defined a string of text enclosed within <p> HTML tags. This text outlines the history of the Pringle and Sons Bakery. Then, we enclosed the terms we want to appear in red in <span> tags.

In our CSS file, we specified that the color of any element assigned the redText class should be red. This allows us to change the color of our text to red when we use the <span class=“redText”> tag.

The <span> tag is useful in this case because we only wanted to emphasize particular words in our text. We could have applied the red text styling to the <p> tag itself. But, that would have resulted in an entire paragraph of red text.

<span> HTML in a list

Suppose Pringle and Sons Bakery asked us to add a list to their website with links to their social media pages.

The Bakery noted that the links to their Twitter and Facebook pages are especially important because the team is most active on those platforms. So, they want us to highlight those links in light blue text.

We could use the following code to accomplish this task:

index.html

<ul>
	<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
	<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
	<li><a href="instagram.com">Instagram</a></li>
</ul>

styles.css

.blue {
	background: lightblue;
}

Our code returns:

In our HTML code, we created an unordered list using the <ul> tag. This list has three items, each of which is contained within <li> tags.

The list items for Twitter and Facebook are enclosed within HTML Span tags (<span class=“blue”> and </span>). The opening span tag for each list item specifies a class attribute. The value of the class attribute is “blue”.

We defined a style called .blue that changes the background color of any element to which it is applied to light blue. This caused the background color of all links with the CSS class .blue in our HTML code to change to light blue.

The background color associated with our Instagram link did not change because we did not enclose the text for that link within <span> tags.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Conclusion

The HTML <span> tag is a generic container used to apply styles to specific elements on an HTML page. By default, the <span> tag does nothing, but it can be used in combination with CSS to apply styles to elements.

As a challenge, define a <span> tag which makes a word in a sentence appear in all capital letters. You’ll need to use a CSS rule to transform the text into uppercase with your <span> tag.

This tutorial discussed, with examples, how to use the HTML <span> tag in your code. You’re now ready to start using the <span> tag like a professional web developer!

For guidance and support on how to learn HTML, read our full How to Learn HTML guide.