Français

<span>

Applying inline styling or switching language within a sentence

— 1 min read

  • HTML
  • accessibility
  • semantics

<span> — The inline container

The <span> element is a generic inline container with no semantic meaning of its own. It serves as a hook for CSS styling or for marking a language change with the lang attribute.

When to use it

You want to apply a style to a word or group of words where no appropriate semantic element exists. You want to signal a language change within a sentence. Before reaching for <span>, check whether a more semantic element fits (<em>, <strong>, <mark>, <cite>, etc.).

What you gain

Accessibility: with the lang attribute, screen readers switch to the correct pronunciation for the foreign word.

Code example

<p>
  Le concept de <span lang="en">progressive enhancement</span>
  est fondamental en developpement web.
</p>
 
<p>
  Use the <span class="highlight">primary action</span> button
  to confirm.
</p>

Further reading