In HTML, span is a generic container for a word, phrase or other phrasing content. It gives you somewhere to attach a class, a language attribute or a script hook when no more meaningful element fits. By default, a span stays inline with the surrounding text. It does not make that text bold, colored or clickable on its own.

Think of a collection notice that says, “Collect your order from the side door.” You want the location to stand out without turning it into a heading or a separate paragraph. A span can wrap just those three words. The rest of the sentence remains ordinary paragraph text.

What is span in HTML?

A span groups content without assigning it a particular meaning. The surrounding paragraph is still a paragraph; the wrapped location is not automatically an address, a warning or a link. You supply an attribute when you need one, then CSS or JavaScript can select that element.

<p>Collect your order from <span class="pickup">the side door</span>.</p>

The opening tag begins the wrapper. The closing tag ends it after “door,” leaving the full stop outside. This is a small boundary, but it decides which characters get styled. Forget the closing tag and later words may receive a style you intended for only the location.

The class name is pickup, without a dot in the HTML. A CSS class selector uses the dot. Put the following rule in your stylesheet or inside a style element in the document head:

.pickup {
  color: #145545;
  background-color: #e8f4ec;
  padding-inline: 0.2em;
}

You should get dark green words on a pale green background. Remove the rule and the wrapper remains in the document, but the words look ordinary again. That is a useful first experiment: it separates the HTML grouping from its visual treatment.

Choose a class name for the content’s purpose. If the color changes next month, pickup will still make sense. A name such as green-text becomes misleading. Dartmouth’s CSS fundamentals notes explain this naming approach and the distinction between a reusable class and a unique identifier.

A complete example to try

Save this document as pickup.html in a plain-text editor, then open it in your browser. It needs no downloaded fonts, JavaScript or server. There are three different decisions in the body: a styled location, a phrase marked as Spanish, and an important instruction.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pickup instructions</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6;
           margin: 2rem; color: #172331; background: #ffffff; }
    .pickup { color: #145545; background: #e8f4ec;
              padding-inline: 0.2em; }
  </style>
</head>
<body>
  <h1>Collecting your order</h1>
  <p>Collect your order from <span class="pickup">the side door</span>.</p>
  <p>Ask for <span lang="es">la caja</span>, meaning the box.</p>
  <p><strong>Bring your order number.</strong></p>
</body>
</html>

Start by checking the location. Only “the side door” should have the green treatment. The Spanish phrase should remain ordinary-looking text. The order-number instruction will normally appear bold because it uses strong, not because every span is bold.

Now move the first closing span tag to just before the word “door.” Save and reload. You should see the background stop earlier. Move it back afterward. Changing a wrapper’s boundaries is a quick way to understand which content belongs to it.

Try a second paragraph with another pickup class. Both locations should get the same treatment. You do not need a new rule for every occurrence. An id is different: each identifier must be unique within the document, even if the elements happen to look identical.

For a larger site, keep shared rules in an external file instead of copying a style block into every page. Our guide to linking CSS to HTML covers the file connection and relative paths. The markup in the body can stay exactly the same.

Span, div or a semantic element?

Before adding a span, ask what the content actually is. If it is a heading, link, quotation or instruction of strong importance, HTML already has elements that express those jobs. A wrapper with an impressive class name does not supply the same meaning.

<p><strong>Bring your order number.</strong></p>
<p>Please collect it <em>today</em>, not tomorrow.</p>
<p>Track your parcel on the <a href="/orders/">orders page</a>.</p>

These fragments illustrate meaning. Bring your order number is important. Stressing today changes how the instruction is read. The orders link needs an existing /orders/ destination on your site. None of those tasks needs a span masquerading as another element. The difference lies not in how you style it, but in what message you send to your visitors.

A div normally starts a block; a span normally participates in a line of text. CSS can change that display behavior, but it does not change which child elements are allowed. Putting a paragraph inside a span is not repaired by giving the span display: block. Use a suitable container in the first place. Changing display also does not turn a neutral wrapper into a heading or a control.

Mark a phrase in another language

A span can carry useful information even when you apply no styling at all. In an English paragraph, lang=”es” identifies a Spanish phrase. Here is the line from the complete example:

<p>Ask for <span lang="es">la caja</span>, meaning the box.</p>

The attribute applies to the wrapped phrase, not the whole paragraph. It does not translate the words. If the entire paragraph were Spanish, you could put lang on the paragraph itself and skip the extra wrapper.

Texas A&M University–Corpus Christi’s language guidance demonstrates using span when only part of a page changes language. Match the language code to the actual text; choosing a code because it produces a preferred voice defeats its purpose.

Language information can help assistive technology choose pronunciation. It is worth checking with the languages and voices available in your testing setup rather than assuming every combination sounds the same. Western Washington University’s language guide describes why identifying both page language and inline changes matters.

Understand inline layout

Inline does not mean “always on one line.” A long phrase inside a normal span can wrap across lines as the available width shrinks. The span does not insert a forced line break, but it also does not prevent normal text wrapping.

There is another common surprise: setting width or height on an ordinary inline span does not size it like a block. If you need a compact box within a line, such as a delivery-time label, inline-block is one option.

<span class="delivery-slot">9–11 am</span>

.delivery-slot {
  display: inline-block;
  min-width: 6rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #64748b;
  border-radius: 0.25rem;
}

The time label now accepts a minimum width and has padding and a border. It remains part of the surrounding inline layout. There is no need to turn every styled word into an inline-block box, though. A phrase that should flow naturally through a sentence is often better left inline.

Large vertical padding on an ordinary inline box can overlap neighboring lines rather than neatly pushing them apart. Check more than the one line where you first added the style. A narrow window makes these problems easier to spot.

For a typeface change, use a class with the appropriate CSS font property. You can apply the class directly to an existing element if the whole element needs it. Our guide to changing fonts in HTML explains family choices and fallbacks. A span is useful only when you need a smaller target.

Troubleshoot a stubborn span

If the words remain unchanged, look at the element in the browser inspector. Is the class actually present? Does the selector match it? Check the stylesheet request before adding stronger selectors or important declarations. The problem might simply be a missing file.

Do not attach click behavior to a span just to avoid a button’s default appearance. You would have to recreate keyboard handling, focus and semantics. Style the correct native control instead. A neutral text wrapper should not accidentally become the only way to perform an action.

Keep wrapping restrained, too. If one class can be placed on an existing paragraph, adding three nested spans makes inspection harder without helping the reader. Remove a wrapper when it no longer carries a needed attribute or provides a useful selection boundary.

Questions and self-check

Does span add a line break?

Not by default. It is inline. Text may still wrap naturally, and CSS can change the element’s display.

Can I nest spans?

Yes, when their content remains valid. Close them in reverse order and keep a reason for each wrapper. You rarely need a separate span for every word.

Will a span improve SEO?

A generic wrapper provides no automatic ranking benefit. Use clear content and meaningful elements. Do not replace headings or links with styled spans and expect search engines or readers to recover the lost structure.

Check your understanding

Choose your answer, then open each explanation. The answers use native disclosures and require no custom article script.