Learn HTML – Part 22 – span Tag – Inline Container Element

The HTML span tag is a generic inline container used to group small portions of text or elements.

Unlike the div tag, the span tag does not start on a new line and only takes up as much width as necessary.

What is the span Tag?

The span tag is an inline element. It is mainly used to apply CSS styles or JavaScript behavior to a specific part of content.

It has no visual effect unless styled.

Basic Syntax

<span>Inline content here</span>

Example – Styling a Word Using span

<p>Learn <span style="color:red;">HTML</span> easily.</p>

Output:

Learn HTML easily.

In real projects, styles are usually applied using CSS classes instead of inline styles.

Using span with Class Attribute

<p>Welcome to <span class="highlight">WPDeveloperTips</span></p>

This allows developers to style only a specific word or phrase.

div vs span – Key Differences

When Should You Use span?

• To style a single word inside a paragraph
• To highlight text
• To apply color or font changes
• To attach JavaScript functionality to small elements

Use div for large sections and layout.
Use span for small inline styling.

Common Mistakes Beginners Make

• Using span for layout instead of div
• Forgetting that span is an inline element
• Overusing inline styles instead of CSS classes

Conclusion

The HTML span tag is a generic inline container used to group and style small portions of content.

It is best used for styling specific words or small elements without breaking the layout.

What’s Next?

Now that you understand the span tag, the next step is learning about the header tag, which is used to define introductory content for a webpage or section.

Next: Learn HTML – Part 23 – header Tag – Introductory Content Section →

Series: Learn HTML Series