demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The span tag

html / elements

Estimated reading time: 55 seconds

<span> is the second-most commonly misunderstood tag in the 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 . 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.