👀 Live Preview
Highlight a single word inside a sentence:
This is an example of styled text using the span tag.
HTML <span> Tag
Overview
What You’ll Learn
The <span> tag is a versatile inline container for styling portions of text. This guide covers syntax, global attributes, common use cases, span vs div, and best practices for beginners.
Inline Styling
Highlight words or phrases inside a sentence without breaking the line.
CSS Hooks
Use class and id to target text with stylesheets.
Core Syntax
Write valid opening and closing span tags.
Grouping
Wrap inline elements together for consistent styling.
span vs div
Know when to use inline vs block containers.
Best Practices
Prefer CSS classes over excessive inline styles.
Fundamentals
What Is the <span> Tag?
The <span> tag is a generic inline container used to group text or inline elements and apply styles to a specific portion of content. Unlike block-level elements, span does not add line breaks — it stays on the same line as surrounding text.
No default semantic meaning
span is a styling hook, not a semantic tag. Use strong, em, or code when the content itself carries meaning; reach for span when you need a neutral wrapper for CSS or JavaScript.
In the vast landscape of HTML elements, span is one of the most frequently used tags for precise inline formatting in tutorials, blogs, and production websites.
Foundation
📝 Syntax
Wrap the desired content within opening and closing span tags:
syntax.html
<span>Your text here</span>Styled Inline Example
styled-span.html
<p>
This is
<span class="highlight" style="color: #FF5733;">
styled text
</span>
inside a paragraph.
</p>Syntax Rules
spanis phrasing content — use inside block elements likep,li, ortd.- Self-closing syntax (
<span />) is not valid in HTML. - Do not use
spanas a substitute for block layout — usedivfor sections. - Prefer
classover repeated inlinestyleattributes for maintainability.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic span | <span>...</span> | Inline wrapper |
| With class | <span class="highlight"> | CSS hook |
| Inline style | style="color: red;" | Quick tweaks |
| Bold word | style="font-weight: bold;" | Emphasis |
| vs div | span = inline | div = block |
| Browser support | Universal | All browsers |
Comparison
⚖️ <span> vs <div>
| Feature | <span> | <div> |
|---|---|---|
| Display | Inline (stays on same line) | Block (starts new line) |
| Typical use | Style a word or phrase | Layout sections and containers |
| Semantic meaning | None by default | None by default |
| Can wrap block elements? | No (invalid nesting) | Yes |
| Example | <span class="price">$9</span> | <div class="card">...</div> |
Reference
🧰 Attributes
The <span> tag has no tag-specific attributes. Combine it with global attributes like class and style to apply CSS rules.
span.html
<span class="highlight" style="color: #FF5733;">Styled text here</span>class / id GlobalPrimary hooks for CSS selectors and JavaScript targeting.
class="highlight"style GlobalInline color, font-weight, or spacing for quick one-off styling.
style="color: #FF5733;"title OptionalAdvisory tooltip text on hover for extra context.
title="Sale price"lang OptionalDeclare language when the wrapped text differs from the page.
lang="fr"data-* ScriptingStore custom values for JavaScript without extra markup.
data-role="price"hidden OptionalHide the span from display when toggling visibility in scripts.
hiddenHands-On
Examples Gallery
Inline styling, bold emphasis, and grouped inline elements with copy-ready code and live previews.
📚 Common Use Cases
Use <span> for inline styling, highlighting words, grouping inline elements, and attaching CSS classes to portions of text.
Inline Styling with class and style
The primary purpose of span is to apply inline styling to specific portions of text. This is useful for highlighting or emphasizing certain words or phrases:
styled-span.html
<p>
This is an example of
<span class="highlight" style="color: #FF5733;">Styled Text Here</span>
using the span tag.
</p>Inline Bold Emphasis
Use span with inline font-weight to emphasize a single word inside a line of text:
inline-styling.html
<p>
In this example, we use the
<span style="font-weight: bold;">bold</span>
style for emphasis.
</p>Grouping Inline Elements
The span tag is commonly used to group and style inline elements together. This helps apply consistent styling to code snippets or grouped text:
grouping-inline-elements.html
<p>
Here is a JavaScript variable:
<span class="code">const variable = 'Hello, World!';</span>
</p>A11y
♿ Accessibility
- Use semantic tags first — Prefer
strong,em, orcodewhen meaning matters; usespanonly as a styling wrapper. - Do not convey meaning by color alone — Pair color highlights with weight, underline, or accessible text.
- Keep contrast readable — Styled span text must meet color contrast guidelines.
- Avoid empty spans — Do not leave
<span></span>with no content or purpose.
🧠 How <span> Works
1
Author wraps inline content
A word, phrase, or inline element is placed inside span.
Markup
2
CSS targets the wrapper
Styles apply via class, id, or inline style.
Style
3
Browser renders inline
No line break is added; styled text flows with surrounding content.
Display
=
Precise inline formatting
Only the wrapped portion changes appearance while the sentence stays on one line.
Compatibility
Browser Support
The <span> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Inline styling everywhere
All browsers render <span> as a generic inline container.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<span> tag 100% supported
Bottom line: Use <span> confidently for inline styling in any browser.
Wrap Up
Conclusion
Mastering the <span> tag empowers you to apply precise styling to specific portions of your HTML content. Whether emphasizing text or grouping inline elements, span is a valuable tool in your web development toolkit.
Pro Tips
💡 Best Practices
✅ Do
- Use
spanwhen styling a small portion of text within a larger block - Combine with CSS classes for consistent, reusable styling
- Prefer semantic tags when content carries meaning
- Test styled text for contrast and readability
❌ Don’t
- Use
spanfor block-level layout (usedivinstead) - Rely on excessive inline
styleattributes everywhere - Substitute
spanfor accessible semantic elements - Nest block elements inside
span
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <span>
Bookmark these before you style inline text on your pages.
6
Core concepts 01
Inline
No line breaks.
Display 02
class / style
CSS hooks.
Attributes 03
Highlight
Style words.
Use case 04
Grouping
Inline sets.
Pattern 05
vs div
Inline vs block.
Comparison 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It is a generic inline container for grouping text and applying CSS to a specific portion without adding line breaks.
span is inline and stays on the same line. div is block-level and starts a new line for layout sections.No. Use global attributes like
class, id, style, and data-*.No. Use semantic tags like
strong, em, or code when meaning matters. Use span as a neutral styling hook.Yes. Full support in every major browser including Internet Explorer.
Style inline text
Practice <span> for highlights, emphasis, and grouped inline content in the Try It editor.
About the author
6 people found this page helpful