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 the following figure shows.
Company names styled via span elements
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, 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>