The <span> tag is a powerful yet often overlooked element in HTML. It’s commonly used for adding style and interactivity, but what does span do in HTML exactly? In this guide, we’ll explore its full potential and how to use it effectively in your web pages.
What is a span tag?
We use HTML <span> tag to target and manipulate specific parts within an HTML element without affecting the layout of surrounding elements. In simple terms, it acts as an inline container for styling small portions of text.
<span>....</span>Why and when to use span in HTML?
Since <span> does not introduce additional structure or spacing, it is ideal for precise, targeted styling such as:
- Highlighting text, changing colors, or formatting specific letters, words, or even a small paragraph.
- Wrapping text for CSS animations or visual effects.
The difference between span and div
While both <div> and <span> are used for grouping and styling elements, they behave differently in terms of layout and structure. The table below highlights their key differences:
span | div |
inline element | block element |
stays within same line | starts new line and takes full width |
does not affect layout | breaks the normal text flow |
HTML span using inline styling
Below, I’ve prepared an example to illustrate how we use <span>, along with an image to help you visualize it better. 🤓
In this example, we use <span> to change the style of multiple parts of the text within a <p> element. The <span> tag wraps around specific words we want to highlight or style differently without affecting the entire line.
<p>
My sandwich has
<span style="color:yellow">yellow</span> cheese,
<span style="color:red">red</span> tomatoes and
<span style="color:green">green</span> fresh lettuce!!
</p>
You may also like 🎬
Styling span in CSS: Best practices
We can also style <span> elements beyond CSS inline styling. Below, I include an example and an image to picture it.
In this example, we place the <span> element within a <div> element. The CSS code applies specific styling (color, font style, and text-decoration) only to the text inside the <span> tag, allowing us to highlight or change the look of a selected part without affecting the rest of the text.
<div>
My sandwich is <span>amazing!!</span>
</div>div > span {
color: red;
font-style: italic;
text-decoration: underline;
}
🔖 Here’s a trick: With div > span, we’re styling only <span> elements that are direct children of a <div>. This way, we target only this specific span, without affecting other <span> elements in the code! 🔴
Curious to learn more about how to focus on the exact elements you want? Look at my CSS selectors post — it’s all about precision! 🎯
Targeting letters one by one using span in CSS
Want to take it a step further? We can make it even more impressive by styling each letter of one word individually!! 🧨 ✨
<h1>
My sandwich is
<span class="letter-a">a</span>
<span class="letter-m">m</span>
<span class="letter-a">a</span>
<span class="letter-z">z</span>
<span class="letter-i">i</span>
<span class="letter-n">n</span>
<span class="letter-g">g</span>
<span class="exclamation-mark">!!</span>
</h1>.letter-a {
color: deeppink;
}
.letter-m {
color: green;
}
.letter-z {
color: indigo;
}
.letter-i {
color: purple;
}
.letter-n {
color: blue;
}
.letter-g {
color: darkorchid;
}
.exclamation-mark {
color: magenta;
}
You may also like 🎬
Learn how to use HTML span the fun way
What about making our learning more fun and using the metaphor of a sandwich to represent how the <span> elements are surrounded by their container element (HTML opening and closing tags)!
Here’s the idea 💡
Sandwich with Span as the Filling 🍔
Imagine an illustration where a slice of text is styled like a sandwich with:
- Bread Slices: Representing HTML tags surrounding the
<span>element. - Fillings (cheese, tomato, lettuce): Representing the words or phrases wrapped in the
<span>elements, styled differently to stand out, just like all these fillings inside a sandwich.
This metaphor will show the positioning of <span> clearly! 🥳
🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼
