<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.

The reason <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 <dfn> and <abbr>, <em> and <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.