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

Let’s go over it again.

Specs for <span>:

<!ELEMENT SPAN - - (&#37;inline;)*         -- generic language/style container -->

What is %inline?

<!-- %inline; covers inline or "text-level" elements -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

And who are these?

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE |
                   SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

I’ll say, aren’t these an awful lot of elements to fit in a <span>, the same <span> you just use for a couple of words?:stuck_out_tongue:

It doesn’t matter what you “see”, but what you are supposed to “see”.

It’s like you are using an IT specialist just to type letters and print flyers.

Spans have greater rank. Using an element having a greater rank when you can use one with a smaller rank for a particular job doesn’t sit well with me.

Oops! :blush:

No I know why the civil tone! :lol: Not a chick but a lady!

Not a smart cat? (geen slimme poes?)
Why dumb cat? (Stomme poes?)

Google translate helps a little…

By the way, if your boss want’s your wife?

I’m a chick so I haz a husband : ) And I’ve said no to the boss, esp when he wanted our insurance site 100% in Flash (lawlz). He still dreams of it, though : )

Elements don’t have ‘ranks’. You don’t use an incorrect element for a job just because it fits better with your imaginary ranking order, you use the most appropriate element for the job. In this case, since you don’t want to infer any semantic meaning, yet apply some styles to it, you use <span>.

Sorry, that doesn’t prove anything at all. You are again confusing ‘different’ and ‘emphasised’. Just because something is a foreign word, doesn’t mean you want it to look different. And even if you did, you are now incorrectly using <em> to apply a visual style, rather than a semantic one.

The correct markup in my opinion is:

<h3>About international prenup</h3>

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

Although it doesn’t make any sense when you read it anyway!

Yours is an example of ‘spanitis’ or ‘span’O’rhea’ as you put it - lots of unnecessary spans in there.

Again though: There is a difference between emphasising something and marking it as different. If I was to read this text out, I wouldn’t place emphasis on all the foreign words, and I bet you wouldn’t either.

The reason <em> or <strong> are inappropriate in this case is because we only want to mark up the word as having a different language, NOT emphasise or strongly emphasise it.

Good practice is not using elements just because they are seen as ‘lesser’ as other elements and ‘better able to take 1 word’, even through they convey incorrect semantics.

Pick one from the %inline, one that can be in a span container. But not just random. And I know were you getting at, you little vos.

Well, I have to disagree.

At first it was HTML. Then was CSS.

Span it’s not designed for CSS, it’s for structure. HTML docs must have structure.

Span it’s a way to add structure to HTML docs. That means is for use with A LOT MORE INLINE CONTENT THAN JUST A WORD.

Span it’s not for treating semantic illness. You are using it for semantic purposes, even when you say you are avoiding just that.

Want a green word? That is emphasis in it self. It’s different from the rest. It stands out.

You are taking span definition too lightly. Yes, it’s a general style container. Just don’t use a big boat to crossover the seas only a tiny little mouse.

Your are using a SUPER element to do a plain WORKER’s job. Using it like you suggest, for trivial jobs, seems to me like the easy way.

HTML elements have no emotions. They don’t care what they’re being used for. What matters is that the end user is served the contents with the appropriate semantic markup. One of the span element’s purposes is to style contents without implying any semantic value. That is one of the things it do best.

That seems to me like your are trying to emphasize something. It cannot be green for no particular reason. It’s ilogic.

As I wrote: For no particular reason. I can have a green word in the middle of a sentence if I want to - there doesn’t have to be a reason for it. There’s a distinct difference between adding colour for the sole purpose of adding colour, and adding colour to emphasize a word. You could just as well have written that I was trying to show that the word was a code sample, but it would not be any more accurate.

Your way it’s like: “we have a anonymous element, that’s the solution. let’s throw out (deprecate) the rest”.

Not at all. I just don’t want to use an element with semantic meaning where no semantics are required, when I can use an element with no semantic meaning to do the job.

I have read your posts, and as far as I can tell you are basing your arguments on assumptions you have made from the specs. In my example, each span serves a purpose - to mark the language of the content within it. In your example, the spans do nothing at all, and you have incorrectly put emphasis on 14 foreign words using <em>, when all you wanted to do was mark them as a different language. It’s not just about counting how many spans are used, but what you are using them for.

As for ‘it has to look different’ - why? Why does it have to look different? Even if it does have to look different, you are then abusing the <em> element for the default styling it provides. You can make it look different using CSS if you want it to, but I don’t see why you would want to.

(DIV or SPAN) === STRUCTURE. STYLE maybe, later. STRUCTURE.

HTML 4.01 SPECS:

[I][COLOR=“Blue”][…]

<!ELEMENT SPAN - - (%inline)* – generic language/style container –>
<!ATTLIST SPAN
%attrs; – %coreattrs, %i18n, %events –
>

[…][/COLOR][/I]

B* - inline content may occur zero or more times.[/B]

[I][COLOR=“blue”][…]

The DIV and SPAN elements, in conjunction with the id and class attributes,
offer a generic mechanism for adding structure to documents.

[…][/COLOR][/I]

And yes, I can also read generic language/style container :slight_smile:

Your are using a SUPER element to do a plain WORKER’s job. Using it like you suggest, for trivial jobs, seems to me like the easy way. For mixed language content, span is just what you’re looking for.

If I want a single word in a paragraph to be green for no particular reason, the code <span style=“#0f0”>word</span> is perfectly acceptable.

That seems to me like your are trying to emphasize something. It cannot be green for no particular reason. It’s ilogic.

Your way it’s like: “we have a anonymous element, that’s the solution. let’s throw out (deprecate) the rest”.

Are you angry enough at me yet! Sorry, it’s not my intention at all. :cool:

Those are all “or” conjunctions, not “and”. Notice the span element is among the allowed elements; does span outrank span? How does that work?

Where div is a structural aggregating element, span is a structural segregating element. It ‘sets aside’ its content for whatever is to be done with it; think applying presentation rules with css, or behavioral rules with your favorite DOM scripting language.

Consider the typographic convention of italicizing foreign language phrases; the coding might be “<p>Some <span lang=“fr”>soi-disant</span> experts might say ….</p>”, and the css might specify "span[lang] {font-style: italic;}. Now, you could use the i element with the lang¹ attribute for its contextual semantic value, as you would for a magazine article’s title, but that would not allow you to chose a different appearance without undermining the inherent appearance expected of the element.

cheers,

gary

¹ The screen reader should switch to a French pronunciation for the phrase.

Or <i>. I meant emphazis in a larger vision, not just <em>. Decoration means also bold, italic, underline. That was their purpose at first: decoration.

By the way, if your boss want’s your wife?

Well, that was not nice, sorry. :blush:

I’m not saying you are wrong, Just half-wrong. Span it’s not just for picking out small inline content for styling. It’s designed for a BIGGER purpose. That’s all. Is it an easy choice? Yes, but there may be others.

Thank you for your civil input and please forgive me if I crossed some lines. Peace. :cool:

Not just for single, anonymous content. For that, there are other elements.

Name one.

It’s funny how picky you are given that you post semantic issues in a slight non-semantic interface of this forum.

It’s funny because Stormrider is not only the one who chose vBulletin for SitePoint, he’s actually also the owner of SitePoint.

Stormrider, I suggest we ditch the vBulletin and try out a Perl-based solution using Catalyst and MojoMojo.

@Stormrider, for me, it’s be whatever element I felt like using. Spans have no other semantic reason other then when nothing else is a better fit, it depends on [i]how[/b] you look at the tag choice reasons for using a span over a strong. Depending on how you look at it, you could do either. I find that since Strong has a small semantic meaning (though in a different sense then what hte tag is supposed to generically do) I’d be inclined to use that.

I’m not a semantics guru by any means though :slight_smile:

In a way or another, all html elements are so. The above it’s just an empty phrase.

You can style all HTML elements, but aside from div and span, no other element is designed to be used for styling alone. No other elements in the HTML specification is described the same way. If I want a single word in a paragraph to be green for no particular reason, the code <span style="#0f0">word</span> is perfectly acceptable.

I’m not trying to ‘serve one master’. I’m simply suggesting using an element for one of its required uses, just like the id and class attributes can be used for styling purposes alone.

From the link you posted:

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.

In other words, the span element is designed for (amongst other purposes) to be used to add styling for styling purposes alone.

It’s funny how picky you are given that you post semantic issues in a slight non-semantic interface of this forum.:lol:

Sitepoint should really reconsider vBulletin, you know, because of the tagline.:smiley:

Want a green word? That is emphasis in it self. It’s different from the rest. It stands out.

Not if you’re colour blind. Not if you’re listening to a screen reader reading out the page. Not if you’re using Lynx, or have CSS turned off. A green word just for the sake of green-ness is called decoration. And there is no (non-deprecated) way in HTML to state decoration. Therefore, you must use an HTML element to separate the decorated content from the non-decorated content, in order for CSS (which exists for decoration) to work properly. And you do not want to do that with an HTML element that imparts or suggests any meaning.

That’s why you use <span> and not some other element, like <em> as you suggest (you insist it’s emphasised if it’s coloured). <em> should be used if you want to emphasis the content, but if your boss walks in and says “make this word green because I really like the way it looks there”, then no, you are not going to use a semantic element who has meaning like <em> does.

I should also add that semantics don’t mean much if anything if the elements are empty (when used for sandbags like in the drop-cap example), so it doesn’t really matter what you use there. So, me being Lazy and all, I may use <b> for that, since <b></b> isn’t considered content, and therefore has no meaning anyway, and is an element I can use to hold empty space, or an image, or whatever, with CSS. <b> is just fewer letters to type. : )