The span element in HTML is widely regarded as a semantically empty, inline element which can only be used as a hook for styling purposes — it has no meaning whatsoever. Thus, it is widely believed by semantic purists that its use should be avoided. Others are more lenient and believe that since it has no semantics, nor any default presentation (except display: inline;), it does not hurt to use it; though advise that it should still be used sparingly. ie. Avoid including an extraneous span within every element as done for the CSS Zen Garden.

It is true that a span element on its own with no semantic attributes, or perhaps just a presentational class name and/or style attribute, has no semantics. There are many examples of using the element for purely presentational purposes (eg. Image replacement techniques); however, there are cases where span is the most appropriate element to use.

Definition of Span

The HTML 4.01 specification states in section 7.5.4 Grouping elements: the DIV and SPAN elements:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Basically, span (like div) is a structural element intended for applying author-defined semantics where there is no other suitable semantic element available or as a generic container for semantics expressed through semantic attributes, such as an alternate language; though the element is often used for presentational purposes with little regard for either structure or semantics.

Semantic Elements

As discussed by Evolt in Guidelines for the use of <span>, it is often more appropriate to use other semantic elements instead. Before marking up the content, it is important to consider what the content is and its purpose. You may believe that the content, in some cases, is only being marked up to receive additional presentation (eg. bold font and/or different colour) – hence the very common use of elements like <font> – but there has to be a reason for why the presentation is required. It is the reason for the presentation that should be expressed by the markup, not the presentation itself.

Take, for example, marking up a warning to the reader. The site designer has decided that warnings should be displayed as red text in a visual medium. However, being somewhat educated, the CSS author understands the importance of semantic class names and has allocated a warning class for such purposes, and the font colour is applied using CSS — no font element required. The markup author simply needs to decide upon the most appropriate element for the class to be applied.

Some people may believe that the span element is the most appropriate since the semantics are expressed by the value of class attribute. However, this is not entirely the case. Remember that the class attribute is for author-defined semantics, which are mostly (but not entirely) meaningless to the reader in a non-CSS environment. In general, a warning should be emphasised and is, in this case, being emphasised in a visual medium through the use of red text. Thus it makes sense to use either of the emphasis elements: em or strong. Because it is a warning, and red text suggests a rather strong emphasis, I believe strong is the most appropriate; though, depending on the context, others may have completely different, yet valid opinions and, therefore, reach a different conclusion. However, by using <strong class="warning">, the semantics are expressed by the element and extended by the class, so it still makes some sense in a non-CSS environment.

Semantic Attributes

There are many cases where some, or all, of the semantics required may be expressed through the use of attributes such as title, lang, or any other semantic attributes. The applicable attributes, in this case, include those defined by the %coreattrs, %i18n and %events modules. These comprise attributes such as id, class, title, lang, dir and the onevent collection. For example, the semantics of applying a lang attribute to an element states that the element’s content is a different language from the parent element (assuming the ISO-639 language codes used do not match).

Because of the modules in which these attributes are defined, they also apply to most (not all) other elements in HTML. That means that exactly the same semantics that may be applied to span with attributes may also be applied to those other elements. However, there are indeed many cases where no other element is appropriate and span is the best choice.

The aforementioned alternate language markup is the simplest example. In the cases where an alternate language is being used, yet requires no other semantics that may be expressed by other inline elements, span is generally the most appropriate element to use.

Another example is markup for a date and/or time. You may wish to use a date-time class for the date and time of your blog posts, however they may not necessarily require any alternate presentation to make sense to the reader. Assuming the date is not being used as a link and the semantics of other inline markup is inappropriate, span may be the best choice.

In this case, although the class may not necessarily be used for presentational purposes, it is still possible for other non-CSS related processing to make use of the class attribute, such as scripting. For example, you may wish to have some JavaScript convert the date and time presented on your blog, marked up within a <span class="date-time"> element, from UTC to their local computer time for convenience. Hixie’s Natural Log does this; though his markup is different, the processing concept is the same.

Other Non-Semantic Elements

It is important to note that span carries no more nor less semantics than presentational elements such as b and i. These elements, however, although they have no semantic meaning whatsoever, do have default presentation in a visual medium which may (depending on the context) convey semantic information other than emphasis to the reader and may be suitable where strong and em are not. Because of this additional presentation, especially in a non-CSS environment, which may be used to convey some semantics, some authors, such as Eric Meyer, believe that it may be advantageous to make use of these elements, where span would ordinarily do the trick. Eric Meyer has previously explained his use of the b element as a presentational hook for styling purposes, in place of the span element. His reasons ranged from file size, which I previously questioned, to the advantage of the default bold font to express author-defined semantics, other than emphasis, in a non-CSS environment

While, in Eric’s case, the use of the extraneous element, be it span or b, was entirely presentational since the semantics of the content is being expressed by the parent element, not the element itself; there may be many cases where it is considered useful to revert to these other, often disregarded, presentational elements to assist with conveying semantics to some readers, usually in a visual medium, where no other semantic element is appropriate. However, for a similar reason, authors must be careful because the elements may convey semantics that they do not have (eg. <b> may, depending on the context, inadvertently convey a form of strong emphasis in a visual medium). Therefore, although some presentational elements are not deprecated, I do not recommend these presentational elements be used often, and that you carefully weigh up your other options before doing so.

The a element which is designed to be used as either a hyperlink using the href attribute or the destination of a fragment identifier using the name or id attributes is generally considered semantic but, in the absence of either of these or any other attriubutes, is essentially as meaningless as span. For this reason, the current XHTML 2 working draft states in the hypertext module that other than for the explicit markup of links, the element’s semantics are identical to span; and is also one of the reasons why attributes like href may now be applied to nearly every element. So, technically speaking, it is valid to use the a element in place of any span element, however authors should still be cautious with doing so because most authors generally percieve the element as being only for links.

In conclusion, although span is a semantically empty element, whose use should generally be avoided in favour of more semantic elements, there may be cases where other more semantic elements are entirely inappropriate. For example, where the markup is as a presentational hook for styling purposes only, or where all the required semantics may be expressed through attributes. Lastly, it may be advantageous to make use of the default visual-presentation provided some non-semantic, presentational elements in place of span in order to assist with expressing semantics that may not be expressed by other semantic elements. My advice is to use the non-semantic elements sparingly, but don’t be afraid to do so when required.