The Span Element: Inline Styling Hook
If you’ve ever wanted to change the color of just one word in a sentence, or make part of a paragraph bold or bigger, the <span> element is your new best friend.
In this article, you’ll learn what <span> is, why it’s useful, and how to use it to style small pieces of text. We’ll walk through simple, hands-on examples you can copy, paste, and experiment with right away—even if this is your very first time writing code.
What is the <span> element?
In HTML (the language that builds web pages), tags like <p> create paragraphs and tags like <h1> create big headings.
The <span> element is different: it doesn’t create a new line or any visible structure by itself. Instead, it’s an inline styling hook—a small wrapper you put around text so you can style just that part using CSS (the language that styles web pages).
- Inline means it stays in the same line as the text around it.
- Styling hook means it’s mainly there so you can attach styles (like color, size, or font).
By default, <span> does nothing visually. Its power comes when you combine it with CSS.
Your first <span>: changing one word’s color
Let’s start with a tiny example. We’ll color a single word in a sentence.
<!DOCTYPE html>
<html>
<head>
<title>Span Example 1</title>
</head>
<body>
<p>
Learning HTML is
<span style="color: red;">fun</span>
and rewarding!
</p>
</body>
</html>
What’s happening here?
<p>creates a paragraph:Learning HTML is fun and rewarding!<span style="color: red;">fun</span>wraps only the word "fun".- The
style="color: red;"part tells the browser to make the text inside the span red.
So on the page, you’ll see: Learning HTML is fun and rewarding! — but only the word “fun” will be red.
Try it yourself
- Open a plain text editor (like Notepad on Windows or TextEdit on Mac set to plain text).
- Copy the code above into the file.
- Save the file as
span-example1.html. - Double-click the file to open it in your web browser.
You just used a span to style a single word. That’s a big first step.
Why use <span> instead of other tags?
You might wonder: why not just use <b> for bold or <i> for italics?
- Tags like
<b>and<i>add specific visual effects (bold, italic). <span>is neutral. It doesn’t say “this is bold” or “this is a heading.” It simply marks text so you can style it however you want.
This makes <span> flexible and future-friendly. You can:
- Change the color
- Adjust the font size
- Add a background color
- Underline or highlight text
…all by changing the CSS, while keeping the HTML structure simple and clean.
Using <span> with multiple styles
You’re not limited to just one style. Let’s highlight a phrase with several styles at once.
<!DOCTYPE html>
<html>
<head>
<title>Span Example 2</title>
</head>
<body>
<p>
Remember:
<span style="color: blue; font-weight: bold; background-color: yellow;">
practice a little every day
</span>
to improve your coding skills.
</p>
</body>
</html>
What’s happening now?
Inside the style attribute, we have several CSS rules, separated by semicolons (;):
color: blue;→ makes the text bluefont-weight: bold;→ makes the text boldbackground-color: yellow;→ gives the text a yellow background
On the page, only the phrase “practice a little every day” gets these styles, while the rest of the sentence looks normal.
Try it yourself
Change the colors and see what happens.
For example, try:
<span style="color: green; font-weight: bold; background-color: lightgray;">
Play around with different color names like purple, orange, pink, or lightblue.
Exploring is how you learn what you like.
A better way: using classes instead of inline styles
So far, we’ve been using style="..." directly on the <span>. This works, but it can get messy if you repeat the same styles many times.
A cleaner way is to use CSS classes:
- Define your style once in a
<style>block. - Add
class="something"on your<span>.
Here’s how that looks.
<!DOCTYPE html>
<html>
<head>
<title>Span Example 3</title>
<style>
/* This is a CSS class for highlighting text */
.highlight {
color: #d32f2f; /* dark red text */
background-color: #ffeb3b; /* light yellow background */
font-weight: bold; /* bold text */
}
</style>
</head>
<body>
<p>
Coding can feel scary at first, but
<span class="highlight">every tiny step counts</span>
toward your progress.
</p>
</body>
</html>
What’s happening here?
- Inside
<style>...</style>in the<head>, we create a class called.highlight. .highlight { ... }defines how anything withclass="highlight"should look.<span class="highlight">...</span>uses that class on specific text.
Now you can use <span class="highlight">...</span> anywhere on the page, and it will always get the same styling.
Try it yourself
Add another sentence using the same class:
<p>
When you feel stuck, remember that
<span class="highlight">asking questions is a strength</span>, not a weakness.
</p>
Reload the page and you’ll see both highlighted sections share the same style, thanks to the .highlight class.
Styling different parts of a sentence differently
You can also use multiple spans in one sentence to style each part differently.
<!DOCTYPE html>
<html>
<head>
<title>Span Example 4</title>
<style>
.good {
color: green;
font-weight: bold;
}
.okay {
color: orange;
}
.bad {
color: red;
text-decoration: underline; /* adds an underline */
}
</style>
</head>
<body>
<p>
Your code might be
<span class="good">great</span>,
<span class="okay">okay</span>, or
<span class="bad">broken</span>
—but you're always learning.
</p>
</body>
</html>
What this does
- The word “great” appears in green and bold.
- The word “okay” appears in orange.
- The word “broken” appears in red with an underline.
Using multiple <span> elements lets you visually label different meanings or statuses right inside a sentence.
Try it yourself
Change the words and the styles to match your own mood labels, like excited, curious, or confused. You might give each its own color and style.
This is how designers create things like colored tags, labels, and inline alerts.
When should you use <span>?
Use <span> when:
- You want to style part of a line (a word or phrase) without breaking it onto a new line.
- The text doesn’t need its own block, like a paragraph or heading.
- You need a hook for CSS or JavaScript to target a specific piece of text.
Don’t use <span> when:
- You’re creating a full paragraph (use
<p>instead). - You’re making a heading (use
<h1>to<h6>). - You want a box-like section that starts on a new line (use a
<div>or another block-level element).
Think of <span> as a highlighter pen for text, not a big box or section.
Experiment ideas (mini practice tasks)
Here are a few small challenges you can try right now:
Colorful name
Write a sentence with your name and use<span>to color each letter a different color.Inline warning
In a sentence like “Be careful when deleting files,” use a span to make “careful” bold, red, and underlined.Vocabulary helper
Create a sentence in your native language and use<span>with a class to highlight new or important words.
You don’t have to get it perfect. Each experiment teaches you something new.
Quick recap and what’s next
You’ve just learned how the <span> element works as an inline styling hook:
<span>wraps small pieces of text without creating a new line.- Inline styles like
style="color: red;"let you quickly test and see changes. - Using classes (like
class="highlight") is a cleaner way to style many spans the same way. - Multiple spans in a sentence let you style every word or phrase differently.
Your next steps could be:
- Learn more CSS properties like
font-size,letter-spacing, orborder-radius. - Try combining
<span>with hover effects (styles that change when you move the mouse over text). - Explore the difference between
<span>(inline) and<div>(block).
Most importantly, keep experimenting. Every time you wrap a word in a <span> and see it change, you’re building real coding skills—one small, colorful step at a time.
