Semantics: What Is The Correct/Proper Use of the Span Element?

As suggested, the thread title has been changed to reflect the gist of this discussion.


you keep on saying about <em> being semantically incorrect (used as a phrase element). I say <span>, the way you use it, as a non-semantic element, that’s semantically incorrect to use as a phrase element.

<em> cannot be wrongly used in a phrase (to paraphrase !), BECAUSE it’s a phrase element. <span> is a container first, not just for text, that can ALSO hold small pieces of text. But <p> also can do that. With some differences in the default style. Which doesn’t mean much. As default style is only good when no CSS is wanted/needed.

I say emphasis is necessary, unavoidable if talking about language changes in the middle of a phrase. Remember school.

I’m not advocating to wrongly use CSS to reset style back to normal text, as you already use <span> just for that: to have a normal text TO STYLE IT, not to leave it normal. That was the point of start in this argument. You don’t leave it be, you make it green, you decorate it. If so, why <span> is a better choice? <em> can’t make green letters/words? When reading, your green colour, your decoration will be noticed even by those who don’t see. Is this wrong? I guess it’s only the way it should be. Decoration was made to be NOTICED.

I can leave it be, but I’m convinced that some uses of <span> are just only because it’s convenient, makes it easier to grasp, and not because it’s better semantic.

These non-semantic constructs come from a need or a request, or simply for experimenting fun&play. So, what has to be done, has to be done.

But, when you have the opportunity to choose the right element, then you need to go a little further than the common practice, as it may be something you need to think twice about. Only to make it a good practice. And I’m willing to think twice. Or to change my mind. :wink:

Common practice, yes. Good practice? Do you haul a ship overseas for a match stick? Need I reiterate: div’O’rhea? Like in span’O’rhea?

Man. That’s something. Think that all this started from a html construct (drop cap - next generation) that NEVER had the intent to be semantic.

True, the whole point of the drop cap was getting a visual effect. Didn’t he use empty spans for that?

Anything empty pretty much doesn’t count: it’s skipped by most user agents anyway. In that regard, sure, you could
<foo></foo> (if you were doing real XHTML : )

Semantics don’t really enter the question if there isn’t any content.

Yes, I see your point. Right. But do you see mine? Or you just dismiss it because it’s not what you’re used to do? What about the benefits of using elements like those to accentuate a diiferent language word?

It’s easy to say to put a class for that em or that strong (and take care of it by CSS) (maybe there’s no need to if the parent already can be targeted), and you to say it doesn’t need to 'coz span will take care of it without extra coding. The argument could take forever accounting solutions and dillemas.

In the end it’s about good practice. One word ONE SINGLE WORD for such a versatile container I think it’s not good practice. Not even a couple of words make it justifyable.

Man. That’s something. Think that all this started from a html construct (drop cap - next generation) that NEVER had the intent to be semantic.

But someone complained about semantic in that awfull construct and to me that was like… huh? But span for one word it’s not the better way! No way!

And then it started! But I guess I learned something. Only when you hear other’s oppinion then it makes you to think deeper.

Now, each is entitled to his own. I respect other’s. But I can’t help to question. That’s me and that’s how I learn. Trying and make an argument. In the good way!:wink:

Ulyses, I don’t think anyone disagrees with the fact that span can contain multiple elements, and can provide structure to a document, but it can ALSO (and quite legitimately) be used for single words or even letters.

Using <em> to mark a different language would be wrong in my opinion, because you are giving it emphasis where no emphasis is due. You seem to be assuming that giving something emphasis means ‘making it look separated from the surrounding text’, when in fact it doesn’t. <em> is simply wrong here if you don’t wish to also emphasise the text.

Note: it would be perfectly legitimate to do this if you want to mark a different language AND emphasise that same phrase, but you don’t always want to place emphasis on a phrase or word just because the language has changed.

First, <span> for (no) style. These specs are referring to the default style. Default visual style. I don’t think anyone respects them anymore. One word: CSS reset. Well, two actually. :slight_smile: What if noCSS? Makes no difference then. You can argue, but I say: another element is just as good, if not better.

So you are advocating the use of a semantically incorrect element and css to reset the style back to normal text for something you want to mark as different without changing the style? Sorry, but that is EXACTLY what <span> is for.

Guess what, for a word in a phrase, <span> has no semantic, meaning it’s wrong. <em> defines that content as special, which is also the truth, why hide it and pretend it’s the same content… only a little different. Let it out of the closet. <em> emphasises that difference, which is semantically correct, and the emphasis does not involve a trip to the moon or a rock concert. A word in a phrase requires a phrase element. Semantic.

Again, I think you are confusing ‘different style’ with ‘emphasised’. They are different things. <span> is an element just like any other, and it can be correctly used anywhere that requires an inline element, and can contain other inline elements. It is not some kind of ‘super element’ used only to give structure to a document, although giving structure could be argued as a use. Like I say though, I consider that more to be the job of the semantically neutral block level element, <div>. It’s very rare you need to structure inline text & elements in the same way.

Anyway, it’s clear that none of us are going to change your mind on this, so for my part, I am going to leave it here for now.

My question:

And I don’t want to use EM or STRONG, because I only want the text to be pronounced in the correct language for screen readers, I dont want it te become italic (default style for <em>) or bold (default style for <strong>)

A waste of what? Elements don’t have ‘feelings’, they don’t mind if you don’t use them to their full potential. Just like each form doesn’t have to include every type of form element that is allowed in there, or a head tag doesn’t HAVE to include every possibly meta tag, scripts and css when they aren’t needed, and a website doesn’t HAVE to include background sounds and animated gifs just because it can, despite what the 90s told you!

It is perfectly acceptable to use <span> for just 1 word, or even 1 letter in the original drop cap example, it is allowed, there is nothing wrong with it, and it is a perfectly normal (and pretty common) use of it. Using another element just because you see it as being lower in ‘rank’, even if the element contains the wrong semantic meaning, is silly, in my opinion.

Ulyses: I’m convinced you are confusing ‘able to contain many other elements’ with ‘outranks other elements’, when they are in fact 2 separate issues.

No element ‘outranks’ another element, there is no ‘ranking’ system in HTML, I think it is something you have in your head, but no specs mention anything like that I’m afraid. Yes, there are restrictions on what elements can go inside what other elements etc, and you should structure your HTML in a hierarchical way, but I am pretty sure I know exactly how to use HTML properly, despite your accusations otherwise.

As far as I still understand it (and nothing here has convinced me otherwise), <span> is a generic inline element to be used for styling hooks, or to mark up sections of inline HTML (the language example is perfect) when no other element is appropriate, or conveys the right semantics.

This question:

You mentioned something about green then went on to talk about emphasising things when you read them, but didn’t answer the question.

I’m not saying you can’t use it just for text. I’m saying it’s a waste of element’s use to use it for SINGLE WORD! Or just a couple!

Often, just for a questionable semantic issue you, using spans just for one word, means breaking the meaning for creating this element. CONTAINER. THINK BIGGER than a WORD!

If anything, I was advocating respect for HTML standards (as in the structure of a html doc), rather than sacrifice that for a small semantic misunderstanding (how to deal with content you didn’t decide upon yet). Span and div are to provide structure. If they were designed for style only (I repeat “style ONLY”), they be deprecating real soon.

Thus, the use of span means more than pointing out a word for styling purposes. As a span element acts like a container for a number of other inline elements. Therefore, it should be used only when justified by that definition: container (like in “NO div’O’rhea”). Not just for single, anonymous content. For that, there are other elements.

Is span, semantically speaking, Swiss? Yes, and for that, please don’t invade it!

I therefore vote YES to stop the span abuse! And it seems I’m a little related to Don Quijote! So please treat me kindly! (:

I’ve avoided? What question? Didn’t I answer it?

Other inline elements includes simple text, by the definitions YOU posted in page 1.


Ulyses, suppose I have a text in english, with a french word in it,

The fuss was about styling, like in green color. Still, you easily dismiss elements like EM and STRONG. Why? Even more intuitive would be if that word would be read in a different tone. Don’t you think that, even more so, it is the proper course of action?


I may be confusing (doubt that) but I’m not abusing elements. Forget rank (I’m not into military at all), let’s say range of application. Span has a wider range of application than what you SUGGEST impose on it, by using it as a styling hook FOR SINGLE CONTENT, LIKE IN SINGLE WORD. SINGLE WORD!

Of course, as a styling hook for a bigger content (repeat BIGGER CONTENT, BIGGER INLINE CONTENT, CONTAINER), yes, that’s what it’s made for. Also as a languge container, but not just for a word.

Examples provided by W3C are short, but they are just that, short examples. Span’s definition it’s definitory for it’s role. And definition says it’s a CONTAINER. Now, a container can be a cup of tea or a large shipping cargo holder. I think of span as a LARGE shipping cargo holder (FOR INLINE CONTENT).

As far as I still understand it (and nothing here has convinced me otherwise), <span> is a generic inline element to be used for styling hooks, or to mark up sections of inline HTML (the language example is perfect) when no other element is appropriate, or conveys the right semantics.

I never said otherwise. But it’s a generic CONTAINER inline element. Just saying that… size does matter. Even when it comes to inline content. The language example is provided by W3C. It’s just a demo. Short. It only sets the guidelines. Not to be taken as a REAL WORLD example.


It’s nice to see some interest on the subject. Because I believe it should shed some light on a bad habbit (says me).

I stand behind span element definition.

What it’s definition says (and I’ve already added it a few times now in my previous posts), makes it a container (along with the div element). For other inline elements (block-level). And that establishes ranking.

That means that both div and span are to be used to give structure to a document. That means that both seggragate. The html document. And that means both aggregate. Elements toghether. Giving structure. At inline-level or block-level.

What I also stand behind of, it’s the use of other inline elements (one of those with smaller ranking; one of those for which span can act as a container) for pointing out to a small piese of text for styling purposes.

You stand behind some recomandations and examples found troughout specs, like the following:

Although style information may be set for almost every HTML element, two elements, DIV and SPAN, are particularly useful in that they do not impose any presentation semantics (besides block-level vs. inline [p.73] ).

And gary.turner has taken the example right out of the specs.

But these examples DO NOT REPLACE definitions. Nor the correct understanding of them.

What remains is the question of semantics. And here I’m inclined to see why you’re using span.

INLINE-LEVEL. SPAN can only contain INLINE-LEVEL elements, since it itself is an inline-level element.

No, because HTML elements don’t have ‘rankings’ like that. You put a span inside a B or a B inside a span, what’s the difference? Both are valid. Doesn’t change one’s relationship to the other apart from their code order.

You are reading WAY too much into it. It’s not that deep.

Though I think you are getting semantic meanings of tags confused with presentational hooks. Quote the whole section:

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.

STRUCTURE in this sense is NOT semantic structural meaning, it’s PRESENTATIONAL. “impose no other presentational idioms” – “may use these elements in conjunction with style sheets”

Basically DIV and SPAN are presentational structural hooks, NOT semantically structural. They add no semantic meaning to the document which is why they have ZERO impact on things like heading orders. (assuming anyone bothers using heading tags, CAPTION or LEGEND properly in the first damned place instead of abusing paragraph and span tags for the job)

Though I love how the example on the W3C page shows abuse of a paragraph and a span to do CAPTION’s job, span inside the paragraph for no good reason, and a wrapping DIV for no reason either. Good going… and we wonder why nobody can bother to use half the damned tags properly when even the examples from the people defining the specification fail to do so.

<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>

<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>

that’s one hell of a train wreck for what should only need:

<table id="client-boyera" class="client">
	<caption>Client information:</caption>
	<tr><th>Last name:<td>Boyera</tr>
	<tr><th>First name:<td>Stephane</tr>
	<tr><th>Tel:<td>(212) 555-1212</tr>

<table id="client-lafon" class="client">
	<caption>Client information:</caption>
	<tr><th>Last name:<td>Lafon</tr>
	<tr><th>First name:<td>Yves</tr>
	<tr><th>Tel:<td>(617) 555-1212</tr>


<div id="client-boyera" class="client">
	<h2>Client information:</h2>
	<b>Last name:</b> Boyera<br />
	<b>First name:</b> Stephane<br />
	<b>Tel:</b> (212) 555-1212<br />

<div id="client-lafon" class="client">
	<h2>Client information:</h2>
	<b>Last name:</b> Lafon<br />
	<b>First name:</b> Yves<br />
	<b>Tel:</b> (617) 555-1212<br />

Rubbish like that really does piss me off… especially when it comes from “the source” even if it is example code.

Oh man. Definition says it’s a CONTAINER FOR OTHER INLINE ELEMENTS. Now, my assumption is a container it’s for more than a word.

But to be onest I might just fall on my head when I was little!:rofl:
Seriously! I still have a mark on my forehead!