HTML Span Tag | Docs With Examples

The HTML <span> element is an inline container used to apply styles or manipulate a specific portion of text or inline elements without disrupting the document’s structure. Unlike block-level elements such as <div>, <span> does not create a new line.

Basic Syntax of <span>

If you're looking for a general way to include span elements in your HTML projects, use this basic syntax:

<p>This is an <span style="color: red;">important</span> word.</p>

In this example, the <span> element applies a red color to the word "important" without affecting the rest of the paragraph.

Attributes of the <span> Element

The <span> element supports several attributes to modify its behavior and appearance:

• id attribute: Assigns a unique identifier to the span.
• class: Allows grouping multiple spans with shared styling.
• style attribute: Enables inline CSS styling directly on the span.

<span id="customSpan" class="highlight" style="font-style: italic;">Italic Text</span>

Here, the span has an ID, a CSS class, and an inline CSS style for italics.

How & When to Use <span>

• Styling specific words or phrases within text.
• Applying JavaScript functions to inline text.
• Grouping inline elements for manipulation.

Example: Styling a Portion of Text

<p>My favorite colors are <span style="color: blue;">blue</span> and <span style="color: green;">green</span>.</p>

Each <span> applies a different color while keeping the text inline. Open up an HTML editor to see for yourself.

Using <span> with CSS Classes

Instead of inline styles, it's better to use CSS for maintainability.

<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
        text-decoration: underline;
    }
</style>
<p>This is a <span class="highlight">highlighted</span> word.</p>

Here, the highlight class styles the text with a yellow background, bold font, and underline using text-decoration.

Using <span> with JavaScript

<span> is useful for JavaScript interactions.

<p>Click the <span id="changeText" style="cursor: pointer; color: blue;">text</span> to change it.</p>
<script>
    document.getElementById("changeText").addEventListener("click", function() {
        this.innerText = "changed text";
        this.style.color = "red";
    });
</script>

When clicked, the <span> changes its text and color dynamically.

Aligning Items with <span>

While <span> does not support align-items directly, it can be styled within a flex container.

<div style="display: flex; align-items: center;">
    <span style="font-size: 20px;">Aligned Text</span>
</div>

Nesting <span> Elements

You can nest <span> elements for more complex styling.

<p><span style="color: blue;"><span style="font-weight: bold;">Bold and Blue</span></span></p>

Common Questions About <span>

What is a span in HTML?

The <span> element is an inline HTML element used to apply styles or manipulate small portions of text within a document without affecting its overall structure.

What is HTML span vs div?

• <span> is an inline element used for styling parts of text inside a block.
• <div> is a block-level element used to structure sections of a webpage.

When should you use a span tag?

Use <span> when you need to apply styles, add interactivity, or manipulate text without affecting layout. It is best suited for styling individual words or phrases inside a paragraph.

What is the use of spans?

The <span> tag is mainly used for:

• Applying CSS styles to inline text.
• Targeting text with JavaScript for interactions.
• Grouping inline elements to apply shared styles.

What is the difference between span and section?

• <span> is an inline element used for styling or scripting specific text within a block.
• <section> is a block-level element used for grouping content into meaningful sections on a webpage.

When to use span over p?

Use <span> when you want to style or manipulate part of a sentence without breaking the flow of text. Use <p> when structuring paragraphs of text in a document.

Can <span> be used for larger text blocks?

While <span> can wrap multiple words or phrases, it is not meant for larger text blocks. Instead, <div> or <p> should be used for such cases.

Key Takeaways

• <span> is an inline element used for styling and JavaScript interactions.
• It does not affect the document layout.
• Best used with CSS classes for styling and JavaScript for interactivity.
• Supports text-decoration (underline, bold, italics) through CSS.
• Works with align-items in flex containers for proper alignment.

Wrapping Up

The HTML <span> element is a flexible and powerful tool for styling inline text and enabling interactive features. Proper use of the <span> element with CSS attributes, JavaScript interactions, and inline CSS ensures efficiency and maintainability in web development.