Span groups a small part of text without adding special meaning. It is handy when a word needs a CSS class or script target.
What You Need to Know
If the words represent emphasis, a quotation, or another defined meaning, choose a semantic element instead.
Example: See It in Action
This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<p>My favorite color is <span class="color-name">green</span>.</p>
<p>A span groups only those inline words.</p>
<p>It does not add meaning by itself.</p>Let’s Understand the Example
- Span groups a short piece of inline content without adding a new meaning by itself.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
- Class is a reusable label for styling or scripts; several elements may share the same class.
Look for the text “My favorite color is” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “My favorite color is”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Wrap one word of a sentence in a span with a class.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Using span for headings instead of proper heading elements.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- Span groups a small part of text without adding special meaning.
- Span groups a short piece of inline content without adding a new meaning by itself.
- If the words represent emphasis, a quotation, or another defined meaning, choose a semantic element instead.