SPAN or U?Two examples:
<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
<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.
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.
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).
<span class="sillyUnderline"> <em>M</em>aking <em>A</em> <em>C</em>ommercial </span> 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.
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???
Okay, so I looked at the MACCAWS web site, so it is not about accesskeys, but the accessibility/screen reader issue remains!
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?
Oops, I get it wrong. text-transform: capitalize won't have that effect. :-P
u isn't harmful. font is. Not every "deprecated" element should be banished.
Actually Petrik nearly provides us with the best solution:
<span class="abbriviated">
<em>Making</em> <em>A</em> <em>Commercial</em>
</span>
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.
"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).
Eh... that should be:
.abbriviated em:first-letter { text-decoration: underline; }
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).
Egor...do you have it actually working?
::first-letter would be nice. I thought about it as well, but remembered what CSS2.1 specifies:
The
:first-letterpseudo-element applies to block, list-item, table-cell, table-caption and inline-block elements.
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; }
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
?
u isn't really the first element that comes to mind... I can now progerss to Level: 2?
Why is :first-letter limitted to block elements? Is there a specific reason for this, or can CSS be amended to allow inline elements?
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.
I guess there are reasons. However, CSS2.1 matches implementations, mostly. You might want to propose it for CSS3.
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.
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.
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?
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).
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.
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>
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:
<dfn><span>M</span>aking <span>A</span> <span>C</span> ommercial <span>C</span>ase for <span>A</span>dopting <span>W</span>eb <span>S</span>tandards</dfn>
Messy sure, but it works and shouldn't harm anything.
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.
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.)
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!
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.
u seems to be sensible when coding html? no?
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.
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.
use an image. That's semanticly the most sensible thing to do I guess, and it will save you bites
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!
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…
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.