: The SPAN Element
Last updated: 2026-09-12
<span>The SPAN Element
The <span> element is a generic inline container with no semantic meaning. It's used to style a portion of text or as a JavaScript hook without causing line breaks.
| Category | Text Content |
|---|---|
| Content Model | Phrasing content |
| Allowed Parents | Any element that accepts phrasing content |
| Content Tag | Yes — requires closing </span> tag |
| Status | Standard |
📝 Syntax
<span>Inline content</span>
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser | |||||
|---|---|---|---|---|---|
| <span> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
❓ FAQ
QWhat is the difference between and
?
A
<div> is a block-level element (takes full width, starts on a new line), while <span> is inline (only takes as much width as needed, stays in line with text).QCan contain block elements?
ANo,
<span> is inline and cannot legally contain block-level elements like <div>, <p>, or headings. Use <div> or a semantic container if you need block-level content.QWhen should I use instead of or ?
AUse
<em> for emphasis (semantic, affects screen readers), <strong> for strong importance, and <span> only when you need a generic inline hook for CSS styling without semantic meaning.🏷️ Related Tags
💡 Related Cases
📚 Related Tutorials
🙏 帮我们做得更好
我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……
如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏
如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏