HTML <span> Tag – Inline Container
📌 Introduction
The <span> tag is an inline container used to group small pieces of text or elements.
It does not add any visual style by default.
Instead, it is used when you want to:
- Style part of a text
- Target specific text with CSS
- Manipulate content using JavaScript
🧱 Syntax
<span>text here</span>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Span Example</title>
</head>
<body>
<p>I am learning <span>HTML</span> step by step.</p>
</body>
</html>
🖥️ Output Explanation
- The word “HTML” is wrapped in
<span> - By default, it looks normal
- But it can be styled separately
🎯 Why <span> is Important
1. 🎨 Styling Part of Text
<p>I love <span style="color:red;">HTML</span> and CSS.</p>
✔ Only “HTML” becomes red
2. ⚙️ JavaScript Targeting
<span id="word">Hello</span>
<script>
document.getElementById("word").innerText = "Hi";
</script>
✔ Used to change small parts of content dynamically
3. 🧩 Fine Control in Layout
Used when you don’t want a full block element like <div>.
⚖️ <span> vs <div>
| Tag | Type | Use |
|---|---|---|
<span> |
Inline | Small text parts |
<div> |
Block | Large sections/layout |
Example:
<span>Inline text</span>
<div>Block section</div>
🚫 Common Mistakes
- Using
<span>for layout ❌ - Expecting it to add spacing ❌
- Replacing
<div>with<span>❌
🎨 Styling <span>
Very common use:
<p>This is <span style="font-weight:bold;">important</span> text.</p>
🧪 Mini Exercise
Create a page with:
- A sentence about your skills
- Use
<span>to:- Color one skill
- Make another skill bold
- Highlight a keyword