Is it ok to use span?

The <span> tag is often avoided by developers at all costs. It carries no semantic or presentational value and exisits solely as a container and hook for a developer’s CSS. Many argue that more semantic options, i.e. <strong> or <em> should be used instead. This is a good argument, but never say never.

Think about how important the information is inside a span that will use CSS to add image replacement, sliding doors, warning notices, etc… If the information should be emphasized, use something else. If the content is not more important than the text around it, a span is a better choice. Eric Meyer prefers to use the non-semantic <b> tag, which adds style but no semantic weight. This is also an option. Lachlan Hunt has created an essay that describes the Semantics of <span> and his disagreement with Meyers.

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.
Lachy’s Log

The span is not a tag to dismiss. It is a flexible container; suitable for content that you want to add styles, microformats, or metadata without having the content become more important than the sibling text. Use more semantic alternatives when the content should stand out to a screenreader or with CSS disabled.

Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Join the Conversation


  1. Agreed. It’s totally okay to use “span”. My point was largely that it’s also okay to use “b”, in cases where you understand why you’re using it and what effects it will have.

    (Oh, and that’s “Meyer”. I paid extra to have the “s” removed, ya know.)

  2. Last week I’ve had a brief discussion at work about this argument, and I totally agree with you. It’s ok to use the “span” tag, even with a semantic markup.

  3. It is also valid xhtml when used inside a link – the main reason I use it for certain things!

Leave a comment

Your email address will not be published. Required fields are marked *