Learn the Front-end Beta Search

<span>

Draft

Definition

The <span> HTML element is a generic inline container used to group and style specific sections of text or inline elements. It’s a neutral element that doesn’t add semantic meaning but provides a way to apply styles, JavaScript functionality, or accessibility attributes to specific parts of content. The <span> element is essential for fine-grained styling and interaction control.

Syntax

<span>Inline content</span>

Attributes

Global Attributes

The <span> element supports all global HTML attributes:

<span id="span-id" <!-- Unique identifier -->
  class="highlight"
  <!-- CSS class names -->
  style="color: red;"
  <!-- Inline styles -->
  title="Tooltip text"
  <!-- Tooltip text -->
  lang="en"
  <!-- Language -->
  dir="ltr"
  <!-- Text direction -->
  data-*="value">
  <!-- Custom data attributes -->
  Inline content
</span>

Accessibility Attributes

<span aria-label="Description" <!-- Accessible name -->
  aria-describedby="desc"
  <!-- Reference to description -->
  role="text"
  <!-- ARIA role -->
  tabindex="0">
  <!-- Tab order -->
  Inline content
</span>

Examples

Basic Span Usage

HTML

Basic Span Usage:

This is a highlighted word in a sentence.

The price is $29.99 for this item.

Contact John Doe for more information.

This text contains deleted content.

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Basic Span Usage:</h3>

  <div class="space-y-4">
    <p class="text-base text-gray-700">
      This is a <span class="bg-yellow-200 px-1 rounded">highlighted</span> word in a sentence.
    </p>

    <p class="text-base text-gray-700">
      The price is <span class="text-green-600 font-semibold">$29.99</span> for this item.
    </p>

    <p class="text-base text-gray-700">
      Contact <span class="text-blue-600 font-medium">John Doe</span> for more information.
    </p>

    <p class="text-base text-gray-700">
      This text contains <span class="text-red-500 line-through">deleted</span> content.
    </p>

  </div>
</div>

Span for Text Styling

HTML

Span for Text Styling:

Color Variations:

This text has red, green, and blue colored words.

Font Weight:

This text has light, normal, and bold text weights.

Text Decoration:

This text has underlined, strikethrough, and italic text.

Background Colors:

This text has yellow, green, and blue backgrounds.

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Span for Text Styling:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Color Variations:</h4>
      <p class="text-base text-gray-700">
        This text has <span class="text-red-500">red</span>, <span class="text-green-500">green</span>,
        and <span class="text-blue-500">blue</span> colored words.
      </p>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Font Weight:</h4>
      <p class="text-base text-gray-700">
        This text has <span class="font-light">light</span>, <span class="font-normal">normal</span>,
        and <span class="font-bold">bold</span> text weights.
      </p>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Text Decoration:</h4>
      <p class="text-base text-gray-700">
        This text has <span class="underline">underlined</span>, <span class="line-through">strikethrough</span>,
        and <span class="italic">italic</span> text.
      </p>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Background Colors:</h4>
      <p class="text-base text-gray-700">
        This text has <span class="bg-yellow-200 px-1 rounded">yellow</span>,
        <span class="bg-green-200 px-1 rounded">green</span>, and
        <span class="bg-blue-200 px-1 rounded">blue</span> backgrounds.
      </p>
    </div>

  </div>
</div>

Span in Forms and Interactive Elements

HTML

Span in Forms and Interactive Elements:

Form Labels:

Form Validation:

Please enter a valid email address

Interactive Elements:

Status Indicators:

Online
Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Span in Forms and Interactive Elements:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Form Labels:</h4>
      <label class="block text-sm text-gray-700">
        Username <span class="text-red-500">*</span>
      </label>
      <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter username">
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Form Validation:</h4>
      <div class="space-y-2">
        <input type="email" class="w-full px-3 py-2 border border-red-300 rounded-md" placeholder="Enter email">
        <span class="text-red-500 text-xs">Please enter a valid email address</span>
      </div>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Interactive Elements:</h4>
      <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        Click <span class="font-semibold">here</span> to continue
      </button>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Status Indicators:</h4>
      <div class="flex items-center space-x-2">
        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
        <span class="text-sm text-gray-700">Online</span>
      </div>
    </div>

  </div>
</div>

Span for Data and Numbers

HTML

Span for Data and Numbers:

Price Display:

$29.99

Statistics:

1,234
Users
567
Orders
89
Reviews

Progress Indicators:

Progress 75%
Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Span for Data and Numbers:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Price Display:</h4>
      <div class="text-2xl font-bold text-gray-900">
        $<span class="text-3xl">29</span>.<span class="text-lg">99</span>
      </div>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Statistics:</h4>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <div class="text-2xl font-bold text-blue-600">1,234</div>
          <div class="text-sm text-gray-600">Users</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-green-600">567</div>
          <div class="text-sm text-gray-600">Orders</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-purple-600">89</div>
          <div class="text-sm text-gray-600">Reviews</div>
        </div>
      </div>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Progress Indicators:</h4>
      <div class="space-y-2">
        <div class="flex items-center justify-between text-sm">
          <span>Progress</span>
          <span class="font-semibold">75%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-blue-500 h-2 rounded-full" style="width: 75%"></div>
        </div>
      </div>
    </div>

  </div>
</div>

Span for Accessibility

HTML

Span for Accessibility:

Screen Reader Labels:

ARIA Labels:

User is online

Descriptive Text:

The file size is 2.5 MB.

Hidden Content:

This text is visible, but this text is only for screen readers this text is visible again.

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Span for Accessibility:</h3>

  <div class="space-y-4">
    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Screen Reader Labels:</h4>
      <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        <span class="sr-only">Close</span>
        <span aria-hidden="true">×</span>
      </button>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">ARIA Labels:</h4>
      <div class="flex items-center space-x-2">
        <span class="w-4 h-4 bg-green-500 rounded-full" aria-label="Status: Online"></span>
        <span class="text-sm text-gray-700">User is online</span>
      </div>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Descriptive Text:</h4>
      <p class="text-base text-gray-700">
        The file size is <span class="font-semibold" aria-label="2.5 megabytes">2.5 MB</span>.
      </p>
    </div>

    <div>
      <h4 class="text-sm font-medium text-gray-700 mb-2">Hidden Content:</h4>
      <p class="text-base text-gray-700">
        This text is visible, but <span class="sr-only">this text is only for screen readers</span> this text is visible again.
      </p>
    </div>

  </div>
</div>

Span Best Practices

HTML

Span Best Practices:

Good Span Usage:

✓ Use for styling specific text portions

✓ Apply JavaScript functionality to specific content

✓ Group related inline elements

✓ Add accessibility attributes when needed

When to Use Span:

✓ No semantic element is appropriate

✓ Need to style part of a text node

✓ Adding interactive behavior to text

✓ Grouping inline elements for styling

Common Mistakes to Avoid:

✗ Using span instead of semantic elements

✗ Overusing span for layout purposes

✗ Not considering accessibility implications

✗ Using span for block-level content

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Span Best Practices:</h3>

  <div class="space-y-6">
    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Good Span Usage:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ Use for styling specific text portions</p>
        <p class="text-base text-gray-700">✓ Apply JavaScript functionality to specific content</p>
        <p class="text-base text-gray-700">✓ Group related inline elements</p>
        <p class="text-base text-gray-700">✓ Add accessibility attributes when needed</p>
      </div>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">When to Use Span:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ No semantic element is appropriate</p>
        <p class="text-base text-gray-700">✓ Need to style part of a text node</p>
        <p class="text-base text-gray-700">✓ Adding interactive behavior to text</p>
        <p class="text-base text-gray-700">✓ Grouping inline elements for styling</p>
      </div>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Common Mistakes to Avoid:</h4>
      <div class="space-y-2">
        <p class="text-base text-red-600">✗ Using span instead of semantic elements</p>
        <p class="text-base text-red-600">✗ Overusing span for layout purposes</p>
        <p class="text-base text-red-600">✗ Not considering accessibility implications</p>
        <p class="text-base text-red-600">✗ Using span for block-level content</p>
      </div>
    </div>

  </div>
</div>

Browser Support

The <span> element is supported in all browsers and has been a standard HTML element since HTML 4.01.

Best Practices

  1. Semantic alternatives: Use more semantic elements when appropriate (e.g., <strong>, <em>, <mark>)
  2. Accessibility: Add appropriate ARIA attributes when needed
  3. Purpose: Use span for styling and grouping, not for layout
  4. Minimal usage: Don’t overuse span elements
  5. CSS classes: Use meaningful class names for styling
  6. JavaScript: Use span for adding interactive behavior to text
  7. Content structure: Don’t use span for structural purposes

Common Use Cases

  • Text styling: Applying specific styles to portions of text
  • Form elements: Adding required indicators or validation messages
  • Interactive content: Adding click handlers or hover effects to text
  • Data display: Highlighting numbers, prices, or statistics
  • Accessibility: Adding screen reader labels or descriptions
  • JavaScript manipulation: Targeting specific text for dynamic updates
  • Grouping: Combining related inline elements for styling
  • <div>: Block-level container element
  • <strong>: Strong importance text
  • <em>: Emphasized text
  • <mark>: Highlighted text
  • <code>: Inline code text
  • <a>: Anchor element for links
  • <button>: Interactive button element