Semantic value of span

Question

The span element would seem to be exactly like a div, but at the in-line level rather than at the block level, however I can't seem to think of any beneficial logical divisions that the span element can provide. A single sentence, or word if not contained in a sentence, seems to be the smallest logical part. Ignoring CSS, since that will give the semantic meaning, when does span provide additional semantic value by chopping up a sentence or string of words? It seems that in all cases, other elements are better suited to adding semantic value, making span a purely layout element. Is this true?

Answer 1

If you want to apply formatting rules to part of the contents (for example a single word or sentence) of a tag. You can use the span tag. It is sometimes called tagless formatting.

I use spans in my EBNF -> XHTML converter to apply a different format to literals and tokens.

Answer 2

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

It depends completely on what you want to express. If marking up the first name is of semantic value to you (be it just to have a hook for CSS to format first names or to extract them using some scripting language), then you can use a span.

Answer 3

spans can actually be carriers for semantic information in form of class attributes. This is used by microformats.

Answer 4

I use SPAN a lot when I want to have JavaScript parse the element and insert some value inside the tag, for example:

<span datafield="firstname"></span>

Would have a value inserted into it later, so in that case it does have meaning, though only a meaning that I decide to give it. The fact that span otherwise has no effect on the layout is ideal in that case.

Answer 5

span tags need a class or id attribute to give them meaning.

e.g. <span class="personal_phone_number">0123 456789</span>

Answer 6

Span can be used to add semantic meaning that falls outside the scope of HTML. This can be done by using classes which identify certain attributes. For example, if you are writing a science-fiction novel you can use span to identify made-up words, because you may want to format those differently, or because you may want the spell-checker to ignore them:

Then the wizard called upon the <span class="wizardword">gravenwist</span> and bade it attack the approaching army. The <span class="wizardword">gavenwist</span> resisted but the wizard's <span class="wizardword">wistwand</span> was too powerful.

This could render as

Then the wizard called upon the gravenwist and bade it attack the approaching army. The gavenwist resisted but the wizard's wistwand was too powerful.

Another good example of this sort of thing are microformats, which allow the creation of arbitrary structure within HTML:

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

The advantage of span, versus div, is that spans can appear almost everywhere because they are inline content, and divs are block elements, so they can only occur inside certain other elements.

Answer 7

A very useful benefit would be to mark changes in language. E.g.

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

Screen readers with multiple language capabilities could make use of this.

So they're not presentational, just generic. In fact, spans are rarely presentational, providing a semantically meaningful class name is used, like "spelling-mistake" and not "bold-red-text".

Answer 8

I think he's asking about the difference between a div and a span, and there really isn't one, other than the default behavior.

It's a matter of convention. When using styling, div is typically used to demarcate divisions of content, while span is used to demarcate inline text. You could just as easily use div everywhere or use span everywhere, but it's helpful to think of them as different, even if it's only by convention.

Answer 9

Ignoring CSS, since that will give the semantic meaning, when does span provide additional semantic value by chopping up a sentence or string of words?

Ignoring CSS (and other non-HTML markup), never. A <span>'s only purpose in life is to carry markup that you can't express in HTML. Markup such as <span style="dropCap">, which doesn't have an equivalent in HTML but has existed in print publishing for hundreds of years, and which is always applied to just one character - the first letter of an item (article, whatever), without causing a word-break (or any larger break).

It seems that in all cases, other elements are better suited to adding semantic value, making span a purely layout element. Is this true?

Yes and no. The only real value of <span> is that it is semantically neutral. That is, unlike for example <p>, it doesn't do anything that you might want to have it not do when you're using it to carry other markup. And there are times, like <span style="dropCap"> above, when you don't want any other effects.

Answer 10

SPAN (and DIV) elements by themselves are generally considered to be semantically neutral. A good approach is to use semantic markup as much as appropriately possible, but sometimes you run into situations where the existing html elements that do provide semantic meaning (EM, STRONG, ABBR, ACRONYM, etc, etc) aren't the right fit semantically for your content. So the next step is to use a semantically neutral SPAN or DIV with a semantically meaningful id or class.

Answer 11

In HTML could be used for microformats. But since actual HTML specification is XHTML, there is no point. Instead of:

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

I'd rather use:

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

Answer 12

The meaning of SPAN is "this is a (generic) span of (e.g., text) content". Compare to DIV, which means "this is a logical division (i.e., a generic document section)".

SPAN is mainly a hook for hanging styles off of (so you can use <span style='color:blue'> instead of <font color='blue'>).

From the spec:

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.

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as "client", "telephone number", "email address", etc., we use DIV and SPAN to achieve the desired structural and presentational effects. We might use the TABLE element as follows to structure the information:

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: [email protected] -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>[email protected]</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>[email protected]</TR>
</TABLE>
</DIV>