[ACCEPTED]-Semantic value of span-semantic-markup

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

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

This could render as

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

In HTML could be used for microformats. But 2 since actual HTML specification is XHTML, there 1 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>

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

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

From the spec:

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

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

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<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>sb@foo.org</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>yves@coucou.com</TR>
</TABLE>
</DIV>