HTML <span> Tag – Proper Understanding and Usage

Definition and Usage

The <span> tag is an inline container with no inherent semantic meaning, used to wrap plain text or other inline content to provide a scope for styles, attributes, or scripts.

The word "span" in <span> comes from English, where it can mean "range" or "interval." Note that in HTML, the <span> tag itself has no inherent meaning—it is simply used to group inline content.

The <span> tag has no inherent semantic meaning by itself, but it is commonly used for the following purposes:

as a CSS selector for applying styles,
to provide a scope for applying HTML attributes,
to select or manipulate specific parts with JavaScript, or
as a purely decorative tag for visual styling.

Use the <span> tag only when semantic markup for meaningful text (for example, <del> or <ins>) cannot be used.

`<span>` vs `<div>` – Key Differences

The <div> tag, like the <span> tag, has no inherent semantic meaning. However, they are used for different purposes.

Comparison between the div and span tags
`<div>`	Used as a container for creating layouts (blocks or sections), grouping markup or content to apply styles or JavaScript, or defining a scope for applying HTML attributes.
`<span>`	Used to wrap plain text or inline content, such as text-related markup, to apply styles or JavaScript, or to define a scope for applying HTML attributes.

The <div> tag is primarily used as a container for creating layouts or dividing content into sections.

Do not use the <span> tag to create layouts (blocks or sections)!
The <div> tag is more appropriate for that purpose.

Practical Examples

The <span> tag is one of the most commonly used tags when building websites. Through various practical examples, we will explore how to use the <span> tag effectively.

Applying Styles to Plain Text

The following is an example of using the <span> tag to define a scope for applying styles to plain text.

HTML

<p>
    The three primary colors of light are
    <span style="color: red;">red</span>,
    <span style="color: green;">green</span>,
    <span style="color: blue;">blue</span>.
</p>

Applying HTML Attributes

The following is an example of using the <span> tag to define a scope for applying HTML attributes.

Code Explanation
The lang attribute specifies the base language of the element's content and applies to all text within the element.

This example demonstrates adding the lang attribute to an element that surrounds content in a different language on a web page.

Selecting or Manipulating Specific Parts with JavaScript

There are situations where you need to select or manipulate specific parts of HTML using JavaScript. The <span> tag has no inherent meaning, making it suitable for defining a scope for scripting.

HTML

<p>
    There is a <span id="target-span" style="background-color: gold;">specific part</span> that can be selected or manipulated with JavaScript.
</p>
<button type="button" id="target-span-btn">Change Text</button>

<script>
  // Using JavaScript, this code changes the text of the targeted span when the button is clicked.
  const btn = document.getElementById("target-span-btn");

  btn.addEventListener("click", () => {
      const targetSpan = document.getElementById("target-span");
      targetSpan.innerText = "Text has been changed";
  });
</script>

Using as a Purely Decorative Tag for Visual Styling

The <span> tag has no inherent semantic meaning, making it suitable for use as a purely decorative tag for visual styling.

Here is an example of using the <span> tag purely for visual decoration. An arrow is displayed next to the text inside a <button> element. This arrow has no intrinsic meaning, so using a <span> tag for styling purposes is appropriate in this case.

HTML

<button type="button" id="toggle-button">
    <!-- Used to apply styles to plain text -->
    <span class="toggle-button-text">Click Me</span>
    <!-- Used purely for visual decoration: arrow display -->
    <span aria-hidden="true" class="toggle-button-arrow"></span>  
</button>

Code Explanation
The aria-hidden="true" attribute ensures that elements with this attribute and their content are ignored by assistive technologies such as screen readers. In this example, the <span> tag is used purely for visual decoration, so the aria-hidden attribute is applied to improve web accessibility.

CSS

#toggle-button {
    padding: 0.5em 1em;
    background: none;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.toggle-button-text {
    margin-right: 1em;
}
.toggle-button-arrow { /* Displaying the arrow */
    display: inline-flex;
    width: 0.7em;
    height: 0.7em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(-45deg) translateY(-0.3em);
}