Vanilla Breeze

span

Generic inline container for phrasing content. Use only when no semantic element fits — for effects, status indicators, translation control, or accessibility helpers.

Description

The <span> element is a generic inline container with no inherent semantics. Like <div> for block content, <span> should be used only when no semantic element fits the need.

Prefer semantic elements first: <em>, <strong>, <mark>, <code>, <time>, <data>, etc. But when the content doesn't fit any semantic category, <span> is the right tool.

When to Use

Legitimate uses of <span> in Vanilla Breeze:

  • Effect targets: Apply data-effect to a text range within a paragraph
  • Status indicators: The .status class for inline status dots
  • Translation control: translate="no" on brand names or identifiers
  • Visually hidden text: .visually-hidden for screen reader context
  • Block progress: The .block-progress Unicode meter pattern
  • Styling hooks: When CSS needs an inline target that has no semantic equivalent

When NOT to Use

  • For emphasis — use <em> or <strong>
  • For highlighted text — use <mark>
  • For code or keyboard input — use <code> or <kbd>
  • For dates or data values — use <time> or <data>
  • For abbreviations — use <abbr>
  • For headings, navigation, or layout — always use the semantic element

Examples

Effect Targets

When a VB effect needs to wrap a text range inside a paragraph, <span> is the correct container:

Status Indicators

The .status class creates an inline status dot using a ::before pseudo-element with Unicode characters. Six states are available:

Translation Control

Use translate="no" on <span> to prevent machine translation of brand names, identifiers, and technical terms:

See the i18n guide for VB's full translation convention.

Visually Hidden Text

The .visually-hidden class hides text visually while keeping it accessible to screen readers. This provides context that sighted users get from visual cues:

Block Progress

A Unicode block-character progress meter using role="meter" for accessibility:

Anti-Patterns

Avoid using <span> when a semantic element exists:

Accessibility

  • <span> has no inherent ARIA role or semantic meaning
  • Screen readers treat it as anonymous inline text
  • Add role, aria-label, or aria-live when the span carries meaning (e.g., status indicators, meters)
  • The .visually-hidden pattern is essential for providing screen reader context that sighted users get visually

Related

  • <em> — Stress emphasis (preferred over styled span)
  • <strong> — Importance (preferred over styled span)
  • <mark> — Highlighted text (preferred over styled span)
  • <code> — Code content (preferred over styled span)
  • <data> — Machine-readable values (preferred over styled span)
  • <time> — Dates and times (preferred over styled span)
↑