W3C defines <span> tag in the same way as <div> tag. I would argue however that <span> has no semantic meaning associated with it, unlike <div>, which denotes some form of a division on a web page.
What is it for?
<span>s are great for adding ‘hooks’ into your HTML documents and lend themselves well to creating bigger aspects of semantic web (such as micro formats).
Unlike <div>, which is a block level element, a <span> is an in-line element, so it is really easy to use it inside the document ‘flow’ without affecting the layout and design.
<span>s are most often found within a bigger ’soup’ of other HTML tags (see examples for better description).
Appropriate use
<span>s should be used for providing additional meaning to snippets of content which are below the description threshold of other (more semantic) tags.
Furthermore, <span>s provide us with an ability to further describe the content wrapped within otherwise semantic tag.
Example (good use of <span>):
<p class="message">
<span id="hcard-jason-grant" class="vcard">Jason</span> says: <span> is a great way to integrate microformats into bigger semantic document.
</p>
Inappropriate use
I have seen some developers use <span> tags in order to denote a component on a page. These are situations where <div> tag is much better suited for and should be used instead of <span>.
Example (bad use of <span>):
<span class="component">
<p><strong>Jason says:</strong> This is my message.</p>
<p class="reply"><strong>Grant says:</strong>This is a reply to a message.</p>
</span>
The above example is wrong for a number of reasons including:
- It does not validate because
<p>(a block level element) is inside a <span> (inline element) - Having more than just some straight snippet of content inside any given
<span>block usually implies wrong coding of HTML.<span>s should therefore not contain any other tags within themselves, including nesting of<span>s.
Out of any element in HTML specification <span>s are the most semantically neutral.
Many developers claim that <span> and <div> are equivalent, with the only difference that <span> is inline, while <div> is a block-level element.
This, in my experience, is not true, since <div> contains semantic meaning and has been used for a long time now to add much semantic value to interfaces.
Although <span>s on their own are semantically neutral, they can be given much more semantic meaning by associating classes and ids with them.
This is regularly done when coding up micro-formats and works very well, as associating class names with a given <span> the layout of the given content can stay the same, while machines can pick up the exact meaning of the data within the tag perfectly.
Written by Jason Grant, BSc, MSc on 31st March 2009