span (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<span>
</span>

Description

For an element that offers no semantic information about the content inside and also provides no styling change, or any other visual change to speak of, the lowly span element is one of the most useful elements in your HTML toolbox.

When you wrap text with an opening <span> and closing </span>, you’re simply providing a hook—one that allows you to add styles (by adding a class attribute and using CSS to define the look of that class), or interact with the element via JavaScript and the Document Object Model (DOM).

In the example shown here, the author has decided that all brand names should be classed as "brandname" and styled differently via CSS, in italic, uppercase letters, as Figure 1 shows.

Figure 1. Company names styled via span elements Company names styled thanks to the presence of span elements wrapping around each brand name

A span is an inline element, and must only contain text content or nested inline or phrase elements. It shouldn’t be used to surround block-level elements—a usage that’s often seen in Content Management Systems which attempt to apply styling to almost any element by throwing a span around it.

The span is closely related to the div element, which is a block-level generic container, as opposed to span, which is an inline generic container.

A note of caution: it’s not unheard of for people to go crazy with spans, using them all over the place. span-itis is a bad practice—it’s just as bad as a dose of div-itis. Be sure to check that you’re using the span element appropriately. For example, if you find yourself applying spans like this, you’re in trouble:

He said it was <span class="important">really</span> important
    to know the difference.

It’s clear that in the example above, the em element would have been more appropriate, as it implies emphasis in all browsers. On the other hand, without CSS styling, <span class="important"> would be all but meaningless.

Example

Here’s an example of the span element being used for CSS styling purposes:

.brandname {font-style:italic;color:#006;text-transform:uppercase;}

⋮
<p>There were various brands represented at the
    conference, including <span class="brandname">Adobe</span>,
    <span class="brandname">Microsoft</span>, <span
    class="brandname">Apple</span>, and <span
    class="brandname">Intel</span>.</p>

Use This For …

This element can be used to mark up text content of any kind.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

The span has full support in the browsers tested.

User-contributed notes

There are no comments yet.

Related Products