Anne van Kesteren

SPAN or U?

Two examples:

  1. <span class="u">M</span>aking <span class="u">A</span> <span class="u">C</span>ommercial <span class="u">C</span>ase for <span class="u">A</span>dopting <span class="u">W</span>eb <span class="u">S</span>tandards
  2. <u>M</u>aking <u>A</u> <u>C</u>ommercial <u>C</u>ase for <u>A</u>dopting <u>W</u>eb <u>S</u>tandards

Now answer the following questions:

Really, it’s out there. Sure, it won’t validate, but this is as bad as using the U element in my humble opinion.


  1. Sometimes the depreciated comments irratate me. This is a prime example. U would be the thing to do, if it weren't depreciated. Smaller, more semantic. The span is just bulky.

    What I think I'd do in that instance is <em class="u">foo</em> myself.

    Posted by Tony at

  2. If the underlined letters don't have any meaning in the surrounding context, the SPAN element is most appropriate. But, for instance, if the underlined letters define what the letter stands for in an abbreviation, the EM element would be, in my opinion, most appropriate (like Tony said).

    Posted by Jero at

  3. <span class="sillyUnderline">     <em>M</em>aking     <em>A</em>     <em>C</em>ommercial </span> 

    Posted by Petrik at

  4. I would certainly choose u over span class="u", for reasons you mentioned (albeit only when it conforms to the document’s dtd). However, I would mark this baby up entirely different:

    […] project <abbr>MACCAWS</abbr>, or <dfn>Making A Commercial Case for Adopting Web Standards</dfn>. 

    (Either that, or wrap the abbreviated form in dfn.)

    The capitalisation already is the visual indicator. Underlining said letters is basically a pleonasm.

    My 2 cents.

    Posted by ACJ at

  5. The deeper problem here is accessibility. I am guessing the use of underlining is for accesskeys or something like that? If so, the problem you have is that some screen readers won't like this. They may read the underlined bit as one word and the rest of the text as another word. E.g. regardless of if you use span or u, <whatever>M</whatever>aking risks being read out as M followed by aking!!

    Hence, if it can be avoided, I say do not use either

    Ideally we need a feature in CSS to modify a given character... Maybe CSS 3 has something like this???

    Posted by Juan Carlos at

  6. Okay, so I looked at the MACCAWS web site, so it is not about accesskeys, but the accessibility/screen reader issue remains!

    Posted by Juan Carlos at

  7. I'd mark it up like Petrik's one. It is much cleaner. Don't need to mention the class N times.

    On another hand, if you don't need semantic meaning, why not just text-transform: capitalize?

    Posted by minghong at

  8. Oops, I get it wrong. text-transform: capitalize won't have that effect. :-P

    Posted by minghong at

    1. Using <em> on a single letter like that may actually break pronunciation in screen readers. If it doesn break than it doesn't provide a usable solution. Otherwise I'd go with it. Does anybody know if this really is the case?
    2. Using <span> on a single letter is very bulky. It does provide a clean way to mark up (x)HTML. I'm not happy with the 'u' class is doesn't seem to provide any semantic meaning.
    3. Using <u> I can kind of live with. It's purely a visual key, and that doesn't swing with that whole accessibility thing. The Maccaw example wouldn't fall on it's ass entirely if you did use <u>, so in the end it's actually an option.

    Posted by Egor Kloos at

  9. u isn't harmful. font is. Not every "deprecated" element should be banished.

    Posted by Joe Clark at

  10. Actually Petrik nearly provides us with the best solution:

    <span class="abbriviated">
    <em>Making</em> <em>A</em> <em>Commercial</em>

    No reason you can't write a stylesheet to display exactly the same way as the Maccaw expample does

    .abbriviated em { font: normal normal 1em/1em Arial; }
    .abbriviated em:first-letter { text-decoration: none; }

    Or something to that effect.

    Posted by Egor Kloos at

  11. "Which one is more semantic?"

    neither. both are presentational. as already mentioned, they break the word up.

    unfortunately, there doesn't seem to be any suitably clean CSS way of achieving this (I thought about wrapping each word in spans and doing a :first-letter, but no joy). so it may come down to personal preference...or simply avoiding this sort of practice altogether (my preferred choice in this case).

    Posted by patrick h. lauke at

  12. Eh... that should be:
    .abbriviated em:first-letter { text-decoration: underline; }

    Posted by Egor Kloos at

  13. to clarify: unless i'm mistaken, :first-letter can only be applied to block-level elements (and, from what i tested, even if you set an inline element to display as block, :first-letter doesn't catch).

    Posted by patrick h. lauke at

  14. you have it actually working?

    Posted by patrick h. lauke at

  15. ::first-letter would be nice. I thought about it as well, but remembered what CSS2.1 specifies:

    The :first-letter pseudo-element applies to block, list-item, table-cell, table-caption and inline-block elements.

    Posted by Anne at

  16. Anne, Patrick you're both right. It doesn't work. Thought I was cleaver there for a minute. Silly me ;) The spec. makes sense. so first-letter is out. I could do it with ::before. But Looks a bit odd. And it hacking it a bit and won't work in IE. So that's out too. :(

    .abbriviated em::before { content: ' _'; margin-right: -0.6em; }

    Posted by Egor Kloos at

  17. CSS helps separate content from presentation. You save a lot of clutter by using CSS. And sometimes you'll add some where it wasn't previously necessary (with bad markup). I think the trade-off is in favor of using CSS.

    MACCAWS is a very, very, specific case. It's a one time thing. You may have a case where you don't want all the letters underlined, and therefore no :first-letter would ever do. I think this is a stricly presentational trick and there is no semantics to that underlining. Therefore using no semantic markup and only semantically empty spans for use with presentational CSS seems OK, though cluttered.

    Of course it's only my opinion and I have been wrong in the past on this very weblog.

    Also I know CSS isn't supposed to be English but isn't it abbreviated instead of abbriviated?

    Posted by ghola at

  18. I can now progerss to Level: 2?

    Posted by Robert Wellock at

  19. Why is :first-letter limitted to block elements? Is there a specific reason for this, or can CSS be amended to allow inline elements?

    Posted by Matthew Raymond at

  20. Since :first-letter applies to inline-block and list-item elements, why not make the markup reflect that? Either em {display: inline-block;} or turn the whole thing into a list, since you're enumerating the words associated with each letter in the abbreviation.

    Posted by Bryan Loeper at

  21. I guess there are reasons. However, CSS2.1 matches implementations, mostly. You might want to propose it for CSS3.

    Posted by Anne at

  22. It is true that wrapping the first letter of each word in an element will, unfortunately, affect screen readers. Anyone interested in seeing this effect can make use of Opera 8's new text-to-speech feature or get a trial version of IBM Home Page Reader or other aural browser. However, I recently discussed this issue on c.i.w.a.html, and the general concensus was that this is a browser bug, not a markup problem, and that semantically correct markup should generally not be altered to suit browser bugs.

    In the past, I have in fact used either <strong> or <em> around the first letter.

    The ::first-letter pseudo-element is being ammended in CSS3 Selectors to work for all elements. The solution presented in comments 11 and 13 above may be the best solution in my opinion; however, as indicated in other comments above, browser support currently seems to be non-existent. Although, I would ammend the above example by using class="expansion" because it is the expansion, not the abbreviation.

    Posted by Lachlan Hunt at

  23. Although I can't make it inline (display:inline-block isn't very well supported yet) it can be done like this. Still, the ::first-letter pseudo-element can possibly make some screen readers/aural browsers read the first letter as a word and the rest as another word.

    .underline * { float:left; padding-right:.2em; }
    .underline ::first-letter { text-decoration:underline; }

    <p class="underline"><span>Making </span><span>A </span><span>Commercial </span><span>Case for </span><span>Adopting </span><span>Web </span><span>Standards</span></p>

    Personally, I wouldn't underline them at all. As Alexander said: The capitalisation already is the visual indicator.

    Posted by zcorpan at

  24. this is as bad as using the U element in my humble opinion.

    How/why? Leaving aside the question of whether you should want to underline the letters that comprise an acronym in its longhand form, and just assuming that you wanted to achieve this: how would you go about it?

    Posted by Aristotle Pagaltzis at

  25. I was always taught that underlining is used for emphasis when italics can't be made, as with old typewriters. On the web you can make text bold or italic, and underlining is generally reserved for links, so maybe you should use <strong> or <em> and style them specifically (but not with underlining).

    Posted by Foofy at

  26. Regardless of any semantic problems, underlining words by any means can be deemed bad as it breaks up the sentance. Typographically speaking, of course. It's not that often that you see underlined words in magazines, for instance.

    Stick to <strong> and <em> and you'll be fine.

    Posted by Chris Poole at

  27. This may seem like a redundant question, but before you question the semantics shouldn't you first ask Why do you want the first letters underlined?. I assume it's for emphasis?

    I'd do it something like this (if I had to use that exact text):

    <p> …project <abbr title="Making A Commercial Case for Adopting Web Standards">MACCAWS</abbr>, or <em>M</em>aking <em>A</em> <em>C</em>ommercial <em>C</em>ase for <em>A</em>dopting <em>W</em>eb <em>S</em>tandards.</p>

    Posted by Joseph Lindsay at

  28. Whats wrong with using something like ACJs example?

    <abbr title="Making A Commercial Case for Adopting Web Standards">MACCAWS</abbr>, or
    <dfn>Making A Commercial Case for Adopting Web Standards</dfn>

    And if you really need to have to have your underlines use a span on every first letter in the dfn tag:

    <span>C</span> ommercial
    <span>C</span>ase for

    Messy sure, but it works and shouldn't harm anything.

    Posted by The Wolf at

  29. If I had to do something like that, I'd use an <em/> or <strong/> element, adding CSS for the underlining. This way even a speech browser can make use of the idea that the particular letters are emphasized from the rest of the text.

    Although, I think an <abbr/> element would still be more appropriate.

    Posted by Devon at

  30. In this particular example, it seems to be about visually indicating access keys. There might be a need for a ::accesskey pseudo-element that can be styled with CSS:

    .menu-item::accesskey {text-decoration:underline}

    Also, shouldn't this be a responsibility for the browser? Keyboard accelerators in operating systems and applications are styled by the GUI system, not by the application developer. A standard way to indicate access keys would be beneficial in many ways, although some visual designers might refuse it. (There are quite a few designers who insist that styling scroll bars is a necessity, too.)

    Posted by Tommy at

  31. Excuse me for my ignorance, but if we do something like <u>C</u>ommercial will google be able to get the word "Commercial" ?

    Thanks a lot!

    Posted by Ioannis Cherouvim at

  32. Parenthesis ignoring the markup; MACCAWS (Making A Commercial Case for Adopting Web Standards) would probably make more sense than underlining the first letter with a presentational underline anyway.

    I know normally it's the other way around and typically you spell-out the word first and place the abbreviation in brackets though it makes a lot more sense than: A Few Underlined Letters.

    Posted by Robert Wellock at

  33. u seems to be sensible when coding html? no?

    Posted by Tim at

  34. Technically, an underline and italics have the exact same meaning (look at your copy of the MLA handbook). Therefore, the depreciation of the underline tag is arguably correct, because it simply duplicates the meaning of the emphasize tag, which should be defined to be an underline or italicized (whichever you prefer).

    There is no need for duplicate tags, because you should only ever be using one at a site, and thus can be identified with the emphasize tag.

    Posted by Jeff Wheeler at

  35. Which one is more semantic?

    Both lack semantics. span has no associated semantics, and u is purely presentational.

    Which one will save you more bytes?

    Version two.

    Posted by Jens Meiert at

  36. use an image. That's semanticly the most sensible thing to do I guess, and it will save you bites

    Posted by Joël Kuiper at

  37. U was deprecated because it is a) presentational, and b) it makes text look like links. Therefore we should not use it if we can avoid doing so. (Not always possible.)

    The problem is that traditionally, documents written in programs like Word often used underlining as emphasis. So people had to change to using B or EM when publishing on the web. It's interesting, because last night I picked up a book from 1997, which emphasised words using an underline. I kept thinking they were links!

    Posted by Chris Hester at

  38. The MACCAWS example is purely presentational (the semantic meaning is embodied in the capitalised letters), so in the end it’s a deficiency in CSS that it can’t produce MACCAWS’ desired styling without markup hooks.

    What we really need here is ::nth-letter and ::nth-word pseudo elements…

    Posted by Adrian D. at

  39. The ::accesskey pseudo-class sounds a lot like some Microsoft-proprientary code I once saw, but I forget what it was. Could be a useful pseudo-class, though.

    Posted by Matthew Raymond at