Guidelines for the use of <span>

I would like to suggest some guidelines for the use of the <span> element. They come from a recent discussion on the CSS-discuss list.

In short: if you think you need <span> then think more carefully about other tags such as <cite>.

The discussion revolved around whether semantic information was being conveyed by the styling of the span. We came to the conclusion that it almost always was.

Let’s take a simple related case that doesn’t actually use a span because it predates them but could. One often finds <b> being used to make some characters bold. This could arguably be replaced by <span class="bold">bold</span> to get the same visual effect but we need to consider what is going on here. Why has the author picked out this particular piece of text? In general it is to emphasise it some way. (We are assuming that the author is intelligent enough not use something horrible like <h1><b>Heading</b&gt</h1>.) This points to the use of <strong> — it won't make any difference visually, but will give an aural browser a much better clue about how to render it. In fact this is an old argument and most CSS-savvy designers would accept it. How does this help us with spans? Well, if we apply it the other way around we can see that a relatively complex bit of markup collapses to something quite simple.

Another example cited in the discussion was the typographic convention of rendering naval vessels’ names in italics as in USS Enterprise. This is a kind of citation and one should therefore use <cite>, styled if necessary. My Oxford Manual of Style says this is the correct treatment for the names of aircraft and vehicles too. So we would have HMS Dreadnought and Chitty-chitty-bang-bang or Spirit of St Louis. (Hmm, now I have to pick a fight with the site designers here; <cite> is set to normal in the style sheet.)

My particular take on this was that I had been replacing <sup> mark up with a span using vertical-align and font-size to control the line spacing effect because a trusted correspondent suggested it but I’d begun to have doubts because I felt the <sup> did convey semantic information. An obvious example would be x=y2 or H2O. In my case I use them to make a standard "glyph" for a commonly recurring abbreviation St for "Saint". So this is another case of markup possible with a span but which can use simpler and more explicit markup.

In writing this I’ve tried hard to find good examples for the use of span and I thought I’d found two in my own work but I’m now convinced that in both cases styling existing, more semantically correct, tags would be better.

Acknowledgements

I use exactly the same parameters that I use for <sup> in a rule called "acknowledgement" but use a span to apply that. It seems obvious now that this has semantic significance and I ought to use a rule based on <cite>.

Footnotes

I have a blue-stocking daughter who uses lots of footnotes. Her technique in HTML is to use superscript numbers inside <a ...></a> to link them to the footnote text. It seems to me now that she should use <a class="footnote_ref" ....>, where there is a rule in the stylesheet like a.footnote_ref {font-size: 75%; vertical-align: 33%;}. There’s probably even a case for a counter here!

Document Control

I have used spans to denote new text within an existing paragraph. Another two useful tags in this context might be <ins> and <del> but they might be a bit heavy-handed in a non-legal context.

Conclusions

The general conclusion was that it was quite hard to come up with cases where there was no semantic overtones implied by the use of a span to make text look different in some way. So in summary, we can put forward the following principles for the use of <span> or its substitution by more meaningful markup.

1. Be suspicious of spans because more often than not there will be some semantic element in what you are trying to convey. For example, until I discovered <q> I was using <span class="quote">
2. Use <em> or <strong> rather than <i> or <b> unless the use is purely decorative. An example of the latter might be in a company logotype where the design department has specified that the product name will always be italicised. Although even that is a weak example. Better <span class="logotype">product name</span> or a <logotype> tag in XML so that when the branding changes to be all upper case or whatever then a simple stylesheet change is all it takes.
3. If one is using XML then it is possible to make spans more explicit by declaring one’s own tag. <ship> in the example of the name of a naval vessel or <logotype> in the second example
4. The use of <sup> and <sub> is usually semantic so it is good practice to use them but style them where necessary.