<span> is the second-most commonly misunderstood tag in the HTML lexicon, after
<div>. A useful way to think of
<span> is this: it is an inline tag that is the liferaft of HTML, used only after every other possible tag has been eliminated. There are almost always other, better options.
<span> is employed as a last resort is that it lacks any semantic value: there’s no telling what the content wrapped by
<span> represents. In addition,
<span> is entirely useless without some attached CSS: applied by itself, it makes no difference at all to presentation. A combination of both factors relegates
<span> to rare, considered and careful use in a site.
A typical use of
<span> is within a block element, to wrap content that cannot otherwise be reached via CSS. For example:
<p>In this paragraph, I want a particular word to be treated <span class="special">differently<span> for whatever reason.</p>
Again, we should have eliminated all other possibilities before applying
<span>, rejecting inline semantic markup like
<strong>, all of which can have CSS applied to them.
Photograph by David Yu, used under a Creative Commons license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.