0%

<span> Generic inline container

A generic inline wrapper with no meaning, for styling part of a line of text.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<span> is the inline cousin of div. It wraps a bit of text inside a line, usually so you can style it or target it with a class or a lang attribute.

A span adds no meaning. Important text wants <strong>, emphasized text <em> and highlighted text <mark>. A span dressed up as a button or a link is always a mistake.

The span element definition (opens in a new tab) says it means nothing on its own but works well with global attributes such as class, lang and dir. The div and span lesson puts it next to div.

Syntax

<span class="name">text</span>

When to use it

A <span> is the hook for part of a line when no text-level element describes its meaning: a colored brand word in a heading, a small "New" badge next to a menu item, a currency symbol you want in a lighter weight, a product name that translation tools should leave alone with translate="no".

Check the meaning first. A date belongs in time, a value for scripts in data, a code fragment in code and an abbreviation in abbr. Each of those can carry a class too, so you lose nothing by choosing them.

Beginners are often surprised that width, height and top or bottom margins do nothing visible to a span. It is an inline box. For a sized badge or pill, add display:inline-block. Avoid stacking many nested spans to combine styles; one span with two classes is easier to read and maintain.

Live example

Edit the code and watch the preview.

<p>Our prices are <span style="color:#c0392b">lower than ever</span> this week.</p>
<p>She said <span lang="fr">merci beaucoup</span> and left.</p>

More examples

Badge in a heading

A span gives a small label inside a heading its own background. Because span is inline, the example adds display:inline-block so padding and vertical alignment behave like a real badge.

<h2>Blueberry pancakes <span style="display:inline-block;vertical-align:middle;background:#2e7d32;color:#fff;font-size:12px;padding:2px 8px;border-radius:10px">New</span></h2>
<p>Our latest recipe, ready in 20 minutes.</p>

Brand name kept untranslated

Automatic translation tools respect the global translate attribute. Wrapping the brand name in a span with translate="no" keeps it intact while the rest of the sentence can be translated. Without it, a translation tool might turn the name into ordinary words.

<p>Welcome to <span translate="no">Sunny Bakery</span>, where every loaf is baked by hand.</p>
<p>Order online from <span translate="no">Sunny Bakery</span> before noon for same-day pickup.</p>

Tip: Use span only when no text-level element says what you mean.

Browser support

span dates back to HTML 4 and is supported by every browser. It has no default styling at all, which is exactly why it is useful as a neutral hook. The translate attribute used with it is part of the Living Standard and is honoured by major translation services.

Accessibility

Screen readers ignore span completely. Meaning carried only by its styling, such as red text for an error, never reaches those users, so say it in words too (WCAG 1.4.1). Why color must not carry meaning alone is covered in the W3C note Understanding Use of Color (opens in a new tab).

Common mistakes

Wrong

<span style="font-weight:bold">Warning:</span> do not unplug.

Right

<strong>Warning:</strong> do not unplug.

Important text gets strong. A span, however it is styled, means nothing.

Frequently asked questions

When should I use a span tag?

When you need to style or script part of a line of text and no semantic element fits. Coloring one word, putting a lang attribute on a foreign phrase and giving JavaScript a hook to update a number are all fair uses of <span>. Text that is important, emphasised, code or a date gets <strong>, <em>, <code> or <time> instead.

Can a span contain a div?

No. <span> accepts phrasing content only, so block elements such as <div>, <p> or <ul> may not go inside. Browsers usually render it anyway, but the markup is invalid. Either turn the outer element into a div or the inner one into a span. For the history of both, see Wikipedia's article Div and span (opens in a new tab).

Practise it

Related text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<pre>Shows text exactly as typed, spaces and line breaks included.<blockquote>A longer quotation from another source, set apart as its own block.<div>A generic block box with no meaning, for grouping and styling.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<i>Text in another voice: foreign words, terms, thoughts, ship names. Italic.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<kbd>Keys or text the user should press or type.<samp>Sample output from a program or a computer system.<var>A variable in math or in code. Italic by default.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.