Here’s a complete, detailed guide to the <span> element in HTML, including its purpose, usage, attributes, and examples.

---

1. What is the <span> Element?

• <span> is an inline HTML element.
• It is non-semantic, meaning it does not convey any special meaning about the content.
• It is mainly used to apply styles or manipulate specific parts of text with CSS or JavaScript.

Key points:

• Does not start on a new line
• Can wrap inline content like text or other inline elements
• Cannot contain block-level elements unless styled to do so

---

2. Syntax

<span>Some inline content</span>

With attributes:

<span class="highlight" id="special-text">Important text</span>

---

3. Common Uses of <span>

3.1 Styling specific text with CSS

<p>This is a <span style="color: red;">red word</span> in a paragraph.</p>

CSS alternative:

<p>This is a <span class="highlight">highlighted word</span>.</p>

<style>
.highlight {
    background-color: yellow;
    font-weight: bold;
}
</style>

---

3.2 Targeting text with JavaScript

<p>Click the <span id="clickable">button</span> to continue.</p>

<script>
document.getElementById("clickable").onclick = function() {
    alert("Span clicked!");
};
</script>

---

3.3 Inline formatting inside a sentence

<p>Hello, <span style="font-style: italic;">world</span>!</p>

• Useful for bold, italic, colored, or underlined text without breaking the line.

---

4. Attributes <span> Can Use

• Global HTML attributes: id, class, style, title, hidden, data-*
• Example:

<span id="username" class="user" title="Username" data-role="admin">Alice</span>

---

5. Difference Between <span> and <div>

Feature	<span>	<div>
Display	Inline	Block
Line break	No	Yes
Semantic meaning	None	None
Usage	Style small inline content	Layout or wrap sections

Use <span> for small inline text changes, <div> for block-level layout.

---

6. Multiple Examples

Example 1 – Colored text:

<p>This is <span style="color: blue;">blue</span> and this is <span style="color: green;">green</span>.</p>

Example 2 – CSS class for styling:

<p>I am a <span class="highlight">highlighted</span> word.</p>

<style>
.highlight {
    background-color: yellow;
    font-weight: bold;
}
</style>

Example 3 – JavaScript interaction:

<p>Click on <span id="magic">this word</span>!</p>

<script>
document.getElementById("magic").addEventListener("click", () => {
    alert("You clicked the span!");
});
</script>

---

7. Best Practices

1. Only use <span> for inline purposes.
2. Combine <span> with CSS for styling and animations.
3. Use meaningful classes or IDs for JavaScript targeting.
4. Do not use <span> for block-level content (use <div> instead).
5. Keep semantic HTML for accessibility; <span> should not replace meaningful tags like <strong>, <em>, <mark>, etc.

---

8. Summary

• <span> is inline, non-semantic, and used for styling or scripting text.
• Cannot create line breaks on its own.
• Works with CSS classes, inline styles, IDs, and JavaScript.
• Ideal for small text modifications inside paragraphs or sentences.

---

Other Courses: