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