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

HTML & CSS
1

As this thread was split from another, Ulyses refers to post #62 and post [URL=“http://www.sitepoint.com/forums/showpost.php?p=4607381&postcount=70”]#70 as containing the main points of reference for this discussion.

[QUOTE=Stormrider;4605318]Like I said though, the only sense in which you are giving emphasis to it is visually. If you were reading it out, you wouldn’t emphasise the first letter or anything, so <span> is more appropriate, because you don’t want to give the letter any semantics at all. You only need it as a style hook.[/QUOTE]

Accordin to http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4:

7.5.4 Grouping elements: the DIV and SPAN elements.

So I guess you maybe are half-right? And he’s half-wrong?

2

One. From you. Based on one of mine. And, letting aside the <span> issue, you are doing something terribly wrong there! Didn’t you see it yet?

No. You, on the other hand, constantly are refusing <span>'s role as a general container for other inline elements, not just for text, as stated by the specs. And the way I’ve use it.

Do I? Or you just like to think that?

I’ve pointed you out http://www.merriam-webster.com/netdict/emphasis. Read please, read. Don’t recite other’s knowledge. Different could also mean emphasised. Get it? It’s a way to different. Or it has to be only one way? Different but… not?

Yes, he somehow comes up with knowledge, not with attacks or hearsay. :slight_smile:

3

This isn’t going anywhere.

Thread closed.

4

Nice one gary.turner. You didn’t have to bother, I did get that from the others. Stones already are building up around me here. :lol:

I don’t see you pointing to an example that would make some sense. I see you take the path of the least resistance: <span> all over, without discernment. Cheap attacks on me (instead of questioning my mark up or providing some real insight, not half-baked definitions) don’t reveal the truth. :nono:

But do you have some authorised cites on the matter at hand, or just the same basis: it’s like that because I use it like that?

The greatest friend of truth is time, her greatest enemy is prejudice, and her constant companion humility.
Charles Colton

I find a lot of prejudice here. But impropriety is in slapping <span>s meaningless tags all over your semantic content, applying it dubious style and meaning, pretending to be OK. I found out from examples that mentors here don’t even know how to wrap content around and inside inline elements. So let me question.

Don’t state the obvious, I know that, read that. I suggest that maybe you are getting used to build your html with only 3 or 4 types of elements, and forget how it supposed to look like.

That said, I don’t refuse to learn. You are refusing reasonable questioning. You are free to mark up your content as you see fit, but probably never understand the reasons.

As I’ve said before, I’m not here to applaud. Sorry if I don’t mingle with the crowd. I’m willing to understand (the hard way) not to recite.

5

@gary.turner

And this how your post should look like.

David Hume
Truth springs from argument amongst friends.

Spinoza
Be not astonished at new ideas; for it is well known to you that a thing does not therefore cease to be true because it is not accepted by many.

Winston Churchill
Men stumble over the truth from time to time, but most pick themselves up and hurry off as if nothing happened.

I can make it spin also, but it doesn’t mean a thing.

6

Ulyses, you are exhibiting an unusually large amount of adamant refusal to learn. No matter how strongly believed, a wrong premise is wrong. You are free to mark up your content as you see fit, but that does not negate its impropriety.

That you believe it so, or apply it in practice does not make it correct.

gary

7

They are grouped together because they are similar in that they are both semantically neutral elements - one is block level, one is inline, simple as that.

In HTML 5, <div> will almost lose its structure role when new elements like header, nav, article etc come in, so then what?

I’m not incorrectly emphasizing 14 foreign words, I’m picturing them (visual or otherwise) different for the audience, which they are. By emphasis. You don’t think it’s semantic. What is then? A non-semantic element like <span>? Your hopes are too high on this one. You’re not fixing semantics with <span>, you are avoiding it.

No, I am not ‘fixing’ semantics, I’m just not trying to force them in where they aren’t needed. Not everything different needs ‘semantics’, there is no point trying to force them in just because you think there should be some. Yet again: ‘Different’ is not the same as ‘Emphasised’. Similarly, not everything that is different has to have semantics applied to it.

And you are using CSS to make those <span>s to look different after all, don’t you remember, green? Or big letter? So you are already breaking your non-style commitment for using <span>.

What non-style commitment? <span> can be used for both marking up sections of which you don’t want to change the style of, or as a hook for styling when an appropriate semantic tag doesn’t exist. You are mixing up the 2 examples here.

Not programmer’s small talk. “I heard it’s not semantic. Oh, wait, that changed. That too.”

Again, you are mixing up 2 different uses of <span> here.

You are just spooning in <em> elements to mark things as different, just to force a different look, even if you don’t mean emphasised. This is wrong. You are thinking emphasised means ‘visually different’ as well, which is also wrong. You don’t design HTML based on the way it looks, you design it based on what different parts mean.

8

Sorry, but there have been plenty of examples provided, I think you simple don’t understand them though, or refuse to try and see their point.

If impropriety is slapping meaningless <span> tags everywhere, I’m afraid you lose on that one with your <span class=“foreign”> tags!

I know about every HTML element, not just 3 or 4, but I build my sites correctly - ie, I don’t try and use elements when it is inappropriate, just because they are there.

Noone here is refusing reasonable questioning, but we have pointed out your errors, and still you repeat them. I’ve lost count of how many times I’ve said ‘different is not the same as emphasised’.

Anyway, I really am going to leave this one now. Quite a heated debate for the use of a <span> tag! It would be nice to get someone like Tommy commenting on this one I think!

9

OK, I feel the need to further explain why <em> can be better than <span> for 1-2 words in a phrase, no matter your point: DIFFERENT LANGUAGE CONTENT inside a phrase, SEMANTIC ISSUES, STYLE HELPERS. And I’d like to make it fun(ny) too. So here it is.

Let’s take this pretend text here. It could be from a site about international dating and mariage.
Don’t jump to any conclusion yet, I’m married seven years now :).

Simple text
[COLOR=“blue”]About international prenup

No matter what motives motif Motive he/she has, you’ve got an offer offre Angebot. Marry marier Einheirat him/her. But a word mot wort is nothing. You also need a document document dokument on paper papier papiere to prevent a wrong conjugation conjugaison konjugation.[/COLOR]

Html fragment for the Simple text
We basically have here a heading and a paragraph, with a few words in different language.

Using default styling (no CSS) and <span> for the foreign words, the html fragment presented by your browser pretty much looks like the simple text.

[COLOR=“Blue”]About international prenup

No matter what motives motif Motive (hey!) he/she has, you’ve got an offer offre(misspeling?) Angebot (is this Ange’s bot). Marry marier(happy, ain’t you?) Einheirat(no need to curse now!) him/her. But a word mot(need a transport, just say it!) wort(worth?) is nothing. You also need a document document(twins are rare, but it looks like you got a pair!) dokument(you fascist!) on paper papier papiere(are you gay?) to prevent a wrong conjugation conjugaison konjugation (is this technical?).[/COLOR]

Reaction: Visual Or reading: Is this a joke? Is it a punk that wrote that? What he’s trying to pull here? And why is it that hard to read? Or hear? This is rubbish!

Using default styling (no CSS) and <em> for the foreign words, the html fragment presented by your browser emphisises, also look pretty much like the simple text, but makes it distinct when a word is in a different language.

Reaction: A little later on. It’s too soon :slight_smile: .

To the Markup
So here’s the basic markup.

<h3>About international prenup</h3>

<p>No matter what motives<span|em lang="fr"> motif </span|/em><span|em lang="de">Motive </span|/em>he/she has, you've got an offer<span|em lang="fr"> offre </span|/em><span lang="de">Angebot</span|/em>. Marry <span|em lang="fr"> marier </span|/em><span|em lang="de">Einheirat </span|/em>him/her. But a word<span|em lang="fr"> mot </span|/em><span|em lang="de">wort </span|/em>is nothing. You also need a document<span|em lang="fr"> document </span|/em><span|em lang="de">dokument </span|/em>on paper<span|em lang="fr"> papier </span|/em><span|em lang="de">papiere </span|/em>to prevent a wrong conjugation<span|em lang="fr"> conjugaison </span|/em><span|em lang="de">konjugation</span|/em>.</p>

We need to sepparate words in a different language. So: <span> or <em>. Both support lang attribute. But they differ in the way of presentation and aureal. Which one is suitable?

Let’s analyze it.

LANGUAGE
Action: <span>, no CSS (just default styling) = no emphasis on foreign words, they look regular (what you’re advocating for). Visually confusing. When reading also confusing: is it a misspeling, an error in transcript?
Reaction: Is this a joke? Is it a punk that wrote that? WWhat he’s trying to pull here? And why is it that hard to read? Or hear? This is rubbish!

Action: <em>, no CSS (just default styling) = distinct emphasis on foregin words. Visually distinct. When reading, also distinct, therefor user (probably,let’s hope so :slight_smile: ) understands that it is a translations of the previous word, not a misspeling or an error.
Reaction: Oh, he’s also trying to teach me basic words for a simple conversation with a french or a german. Nice guy this one. Maybe I’ll choose him. :slight_smile:

SEMANTIC
Not much to say here. <span> can be used. But it means nothing. So it has no purpose. <em> is a proper semantic choice. It’s a phrase element, so it’s in the right place. Serving the obvious role of separating obviously different (another language) content. And that needs to be emphasised. A good practice. Let’s do the math.

Semantic(phrase) + Semantic(em) = Semantic(phrase)

Semantic(phrase) + BlankSemantic(span) = SnowWhiteSemantic(phrase) ?

STYLE
<span> has no style (you can say that again!). <em> has just a little style (oh, that’s not nice of you to say!).

Both can be easilly blue, or green, or brown, depending on the language, if you want. Or have a different font style, repressentative to that country. Or decorated in some way (say a little flag preceding the word). Without the need to resort to any hacks. And the lang attribute works great for both as an attribute selector. My word: Don’t let the style stand in your way! 'Cause it’s not.

The Markup Revisited
I present you a clever mark-up, a mark-up as I see it, that makes the right use for <span>, as a container for inline elements.

<h3>About international prenup</h3>

<p>No matter what motives<span class="foreign"><em lang="fr"> motif </em><em lang="de">Motive </em></span>he/she has, you've got an offer<span class="foreign"><em lang="fr"> offre </em><em lang="de">Angebot</em></span>. Marry<span class="foreign"><em lang="fr"> marier </em><em lang="de">Einheirat </em></span> him/her. But a word<span class="foreign"><em lang="fr"> mot </em><em lang="de">wort </em></span> is nothing. You also need a document<span class="foreign"><em lang="fr"> document </em><em lang="de">dokument </em></span>on paper<span class="foreign"><em lang="fr"> papier </em><em lang="de">papiere </em></span>to prevent a wrong conjugation <span class="foreign"><em lang="fr">conjugaison </em><em lang="de">konjugation</em></span>.</p>

So here it is. I’ve challenged my self to make an example that proves my point.Try both examples in a browser and see the difference.

Awating proposals :slight_smile:

10

I guess you missed the point. There are two <em>s in a <span>. Each <em> has a different value for lang. Together they form an entity called foreign. A distinct piece of content, from the surrounding inline content (for which many would just use two <span>s; but I propose a <span> with two <em>s, each for a language; it’s an example proving a point). Defining a structure. And that’s the use (intended) for <span>. As a container. For inline elements. Not to dumb-style blank-semantic-ise small pieces of text.

EM-ing your “Oka narg shezag eg dag okak magak” will most likely italicise/style it, so what’s your point.

I have trouble following that.

If it were true you ‘always’ used EMphasis to denote a foreign passage/words then all this post/reply I am writing would have been emphasised; QED.
It’s not foreign, but different inline content (from surrounding inline content) (like only these foreign words) I’m emphasising. Which happens to be foreign. Because it was brought up.

It could have been blue/yellow/red text. Or big/medium/small letters. Or whatever doesn’t fit with the rest. But to <span>-it just to style it different (and pretend it’s not different) and then say it’s semantic I’m complaining about.

11

I don’t confuse. It has to look different, read more on the subject of the matter.

And <em> is semantic. You just throw this “not semantic”, but don’t prove anything concrete.

Your example is the obvious choice, and it’s the first markup in my post.

I just want to point out that your markup is the one is showing ‘spanitis’ or ‘span’O’rhea’ signs.

You are using 14 spans, I use only 7 in what I consider a better markup, the second one, where <span> is a container for <em>.

(I would care to comment on how you are throwing spans around content, but that’s for another day.)

I guess you are not really reading my posts, you have already make up your mind. But thanks for your criticizecritiquerkritisieren. :cool:

12

Simply put, surley a span is for an inline block of things, or it used when there is no other semantically correct solution for an inline element. Its just that people dont really bother looking through there list of tag’s when they are learning to build web pages they just go , “SPAN IT” it works. then they get into the habit of it, then they realise its not good and try to fathom out the correct way of using them, thus this post.

13

I haven’t be following this debate (as it seems to have been split refer to #63) but I see absolutely no logic in wrapping the EM (refer to #70) within a span if it is just containing a class - to determine ‘foreign language’. You would of course place the class within the child - unless there was an explicit reason not to.

Although I doubt the need for the EM in the first place unless it is a physical emphasis rather than logical emphasis. A change in language is logical emphasis. If you want to “define” (as in meaning) a foreign word then it is physical and may require supportive text, i.e. the title attribute.

If it were true you ‘always’ used EMphasis to denote a foreign passage/words then all this post/reply I am writing would have been emphasised; QED.

Although the following spoken Giak; “Oka narg shezag eg dag okak magak”, isn’t a common language (and only a handful of people can speak it fluently) you would not EM the whole text. Perhaps you would italicise/style the passage though… It roughly translates to; ‘We are the sword that makes you yield’.

Or if being slightly-poetic, you may place emphases on specific words within the above Giak passage to make it sound more savage, etc.

14

Moderator, I think #62 and #70 should be the #1 and #2, as they offer the grounds for this argument (this thread was not properly started but splited from another and it’s a bit unclear). Thx.

15

[QUOTE=DEATHSHADOW

When used properly, spans are not ‘convenience’, they are for when you are applying presentation but not changing the meaning on inline-level content.[/QUOTE]

sounds about stop on to me, again you issue the slice of death to the post. CHOP ! Thats a very clear descripion, exactly what the’re for.

16

I like to disagree with you. I hope you don’t take it personally.

But, letting aside good manners, your <span>s are not using a purpose, but are being used for a purpose, a wrong purpose for them in this case. As I said, one can use <span>. That’s the first thing you jumped at, but thinking further, maybe it’s not the proper use for a number of cases (how many? it’s numbers really important?). Says me (I’m not trying to start a new religion).

I don’t make assumptions, I completely read the spec and I’m not outlining only what’s obvious.

In my example <span> has a behaviour similar to <div>, which is why they are grouped together in specs definitions. So it’s not doing nothing, it’s providing structure.

I’m not incorrectly emphasizing 14 foreign words, I’m picturing them (visual or otherwise) different for the audience, which they are. By emphasis. You don’t think it’s semantic. What is then? A non-semantic element like <span>? Your hopes are too high on this one. You’re not fixing semantics with <span>, you are avoiding it.

And you are using CSS to make those <span>s to look different after all, don’t you remember, green? Or big letter? So you are already breaking your non-style commitment for using <span>.

I can be persuaded that this is wrong. But give me arguments. Not programmer’s small talk. “I heard it’s not semantic. Oh, wait, that changed. That too.”

Mark up that I provided as an example, is not tailored for my needs. Using CSS can make a beautiful paragraph (like with small national flags and fonts). But that can be also said about <span> only. But even without it, if <em>s are used, it’s still clear about the content, which is not the case using only <span>. And that’s the purpose. And it’s explaining why emphasis is needed for both visual or audio. You are imposing no difference. Why? Is it helping your way? It’s not helping, it’s impeding. It’s not just similar content, but different content. And that can be extended to green colour or big letter.

17

I guess were not reading the same specs.

They are grouped together because they are similar in that they are both semantically neutral elements - one is block level, one is inline, simple as that.

No, because they give structure to html docs by acting as containers, by grouping. That’s why they are semantically neutral. Not the other way around.

In HTML 5, <div> will almost lose its structure role when new elements like header, nav, article etc come in, so then what?

HTML was wrong before. And XHTML. Now, this specs for HTML 5 are too specific to be something good. HTML doesn’t have such a narrow application.

You are thinking emphasised means ‘visually different’ as well, which is also wrong.

Tell that to the default style. Or to the http://www.merriam-webster.com/netdict/emphasis. (And I’m thinking all ways, if you have probably read it a few times now in this thread.)

you are mixing up 2 different uses

I’m not mixing it up, I’m covering all aspects of the argument. Whether decoration or visual feature or speech-based browsing (aural).

18

EM implies a semantic meaning - if you are applying visual styling - aka PRESENTATION for screen CSS that you wouldn’t even WANT when CSS is not present or unused, is COMPLETELY the wrong element to use.

It can if it’s semantic meaning is the WRONG meaning for the element. You are not “emphasizing” the first letter, you are applying a visual presentation to it. Because you do NOT want to apply an actual semantic meaning to it that’s WHY the non-semantic element is more correct.

Semantics is not JUST about slapping tags that have “meanings” around every bit of code - it’s also about NOT slapping tags with meaning around elements that make no sense. You’re not changing the meaning of the letter, you are just changing it’s appearance so semantically neutral tags like DIV or SPAN would be more appropriate - since you want it inline and to have no effect on it when visual styling is not applied, SPAN is the best candidate for the job… Though the CORRECT approach semantically would be no markup at all and just using first-letter! That’s presentation and has no )

P is block level with structural AND semantic meaning. SPAN is inline-level and semantically neutral… on top of which EVERY tag that can hold CDATA or other tags is a “container” so that doesn’t make one lick of difference one way or the other.

Though it’s funny you mention “no CSS wanted or needed” since in choosing your semantic tags one of the things you do (if you are practicing PROPER separation of presentation from content) is write your markup first without CSS present. In the case of making that first letter ‘bigger’ for when CSS is present, you are NOT changing the meaning of that first letter so CSS off/CSS unavailable/CSS unused there is NO reason to use a tag that has BOTH a semantic meaning and a default appearance that screws that up.

That’s applying the WRONG meaning to the CDATA - the OPPOSITE of semantics! It’s like slapping a P around just an IMG tag (it’s not grammatically a paragraph) or slapping DL/DT/DD around form elements - you’re implying the WRONG meaning to the content, in that last example it’s often content that already HAS meanings. (like labels and inputs)

When used properly, spans are not ‘convenience’, they are for when you are applying presentation but not changing the meaning on inline-level content.

19

Since “drop cap - the next generation”, I’ve put (my self :slight_smile: ) under scrutiny if <span> is for use with small pieces of text: 1-2 words.

So, I guess after all the commotion (I’ve also been awarded a warning, lucky me), I feel the need to summarize.

HTML 4.01 specs, as I understand them, are giving <span> a wider range of application, classifying it as a container for a number of inline elements, besides text. And I see that, as opposed to the common practice that’s on everyone’s lips: span is the obvious choice, a Jack-of-all-trades for text, when “Semantics!” makes them shake.

And that’s drawn from short examples provided in specs (which, I say, are not to be taken as real life scenarios). But specs are also saying this about <span>: that used conjunction with the id and class attributes, it offers a generic mechanism for adding structure to documents. Not for phrases. See here, structure to documents, not phrases.

But then it looks like the same specs are giving permission for the use I question: authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes, because <span> does not impose any presentational idioms on the content.

So, the conclusion drawn by many that I don’t agree with: because it imposes no style, use it as semantic super-element. Not true.

Because the lack of presentation, it has to be semantically appropriate in whatever place I like? I don’t think so.

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.

Second, <span> for language content. I guess that just for one word or for a few words, that you don’t find it fit in a <p>, one (me) can find <em> suitable. Style for <em> is controllable by CSS, so default style can be easily overwritten. If reading is involved, I guess it’s a benefit to speak a different language in a different tone. Makes it really to stand out, which is most likely the intent and it also helps the person hearing it.

Third, <span> for style. You want something special for your word. Sure, spans like other elements, can be subject to CSS. And <em> is semantically wrong(?). 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.

But I guess HTML 5, if it doesn’t suffer much modifications, will clearly answer this: is span appropriate as a phrase element?

And it appears it does.

The specs, like the way they are now, are bringing out a concept: Phrasing content. That is

the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

And in HTML 5 <span> is a part of that. But <em> in HTML 5 has also been “improved” in a way that makes it suitable for a word-pointing-out.

The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.

20

Christmas on a cracker, and people say I have a convoluted manner of speech. IF that red highlight is what you were trying to say, that’s some serious “Englisc moder wyrter” territory.