...wouldn't <i> </i> achieve the same thing? Or have I missed something crucial? I may have missed something. It's been a long week. Anyone for a pint?

I would have said (and read) that the emphasis on the verb just emphasises the truth of the statement, not calls it into question, as the illuminati of the W3C suggest!

What would define it for me was the presence of interrogation marks, eg

Cats *are* cute animals - writer emphasising cats really are cute. ! mark optional for further emphasis.

Cats *are* cute animals? - writer being very sarcastic and disbelieving.

Paris - because we are talking about pussy.

Think deeper... HTML is not just for two-dimensional screen markup. <i> and <em>, while rendered the same on paper, are not the same thing at all. While you may want a book title italicized, for instance, you would not want a screen reader to pronounce it with any special emphasis.

... welcome our new cute feline overlords.

"By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of emphasis also typically affects the punctuation, hence the exclamation mark here."

Surely this is mixing semantic and cosmetic markup? Far better for the HTML to omit the exclamation mark and for the browser to add it as part of the rendering process, as I have done in my title.

As one of the afore-mentioned HTML Nazis, I'll give you the (not so) short and sweet of it:

<i></i> only defines an appearance (italics), and has no sematic value. In this day and age, the general rule is that appearance should be done with CSS rathen than with HTML.

<em></em>, on the other hand, is a semantic mark-up -- it displays the significance and meaning of the word(s) it sits around. While most browsers default to displaying it using italics, that's just a very loose convention borrowed from book publishing. Depending on where the output ends up, that appearance can change (using underscores in tele-type situations; using colour in a TTY terminal setting; changing the font size in a tabloid-front-page setting etc) but the meaning -- emphasis -- remains the same.

Ever since XHTML 1.0, they've been phasing out all appearance-related markup in favour of semantic or generic tags (such as <span> or <div>) to which you can dynamically attach any kind of appearance you find appropriate for the context.

Actually, HTML *is* just for two-dimensional screen markup. It may be fashionable to try to retcon it into some generic XML/SGML-style container, but that's neither the origin nor the usage.

In any case, web pages are mostly designed for the overwhelming majority of non-blind users, and so any screen-reader worth its salt will have to treat <i> tags the same as it would treat <em>

This is all completely irrelevant, <em>no</em> self-respecting cat would admit to being <i>cute</i>.

If they're cute I'll vote for them. I've read the original article but I still can't figure out which cats they're on about

I thought it had something to do with this site: kittenwar.com !

"Click the cutest kitten picture!"

Sort-id.

I know that W3C contributors have lofty ideas but they're so far from reality that it hurts. User experience specifications use descriptions like "Italics", "Bold", "35 point", and "800 pixels wide." These specs are handed off to HTML coders who then translate the specifications exactly. They can't re-interpret the specifications to use tags that may produce different visual representations under different conditions. At the same time, user experience creators can't be expected to be intimately familiar with every cryptic document coming from W3C and still have time to get work done.

I see that PDF is gaining ground as an online interactive document format. Yes, interactive using hyperlinks. Doesn't that worry anyone who's writing HTML specs? Isn't that a shocking sign that HTML is too complex for simple work?

It seems that §3.2.19 of the aforementioned spec provides the relationship with the <i> entity:

The <i> element should be used as a last resort when no other element is more appropriate. In particular, citations should use the <cite> element, defining instances of terms should use the <dfn> element, stress emphasis should use the <em> element, importance should be denoted with the <strong> element, quotes should be marked up with the <q> element, and small print should use the <small> element.

That should set things straight. Of course this will be blissfully ignored by all these web page authors who have attended the MySpace College of Web Design. :)

<blink>Over my dead body!</blink>

There are very few cases where <em> is going to produce something different from <i>. On some terminal like display, where italics can't be displayed, we'd expect to get the same underlining from <em> as from <i>. On an audio-based browser, we'd also expect to get the same "emphasis" with either one. Is there any word processing application which distinguishes <em> from <i>? Of course not. So in practice <em> is a duplicate, and a mistake.

People can use CSS classes and styles for book titles and other odd cases anyway.

If our aim is to make the standards usable, we should simplify by eliminating <em> or "deprecating" it. The W3 consortium is fond of doing that with lots of other things. Why doesn't W3 consortium simplify? The messes they've made with HTML, CSS and other standards like SVG should show us that "keeping it simple" is not their priority - rather they want to "keep it complicated". Then HTML nazis and other sad farts can stay busy telling everyone else how wrong, stupid, and misinformed they are for confusing two things which are almost indistinguishable.

what a bunch of C LI /V T S. yeah, cli/vts, a neologism for feline, i just invented it.

what were you thinking?

thank you, mine is the pink neoprene jacket...

Actually, AC, you missed the point -- and so did many of these "User Experience" wankers. '"Italics", "Bold", "35 point", and "800 pixels wide"' can all be defined through CSS, which <em>was designed <em>specifically</em> for this purpose.</em>

The whole point of CSS is to ensure that the HTML contains purely semantic information. Such a setup allows the User Agent to present the information to the user in the format best for the user.

"User Experience" design that calls for 800px wide, for example, doesn't work well on a 2048px wide screen. 35pt does not render well on a 3-inch 320x200 screen. Finally, none of this information is particularly useful to the blind.

BKB, you almost got it right -- it's <i> which is the useless duplicate. <em> has semantic value which cannot be replaced by CSS, whereas <i> is purely presentational, and hence doesn't belong.

HTML has evolved, and its usefulness shouldn't be limited by the fact that some people don't understand that others experience the world differently than they do.

Some seemed to have missed: an <EM> inside an <EM> gives double emphasis, whereas an <I> inside an <I> does not have any logical meaning.

Cats <EM><EM>are</EM> cute animals</EM>

Cats *ARE* *cute* *animals*

Cats <I><I>are</I> cute animals</I>

Cats *are* *cute* *animals*

So I guess the <STRONG> element will be replaced by <EM><EM>

NO THEY'RE NOT FUCKING CUTE, THEY PISS AND SHIT ALL OVER MY RUNNER BEANS, LEAVE DEAD BIRDS IN MY KITCHEN AND TREAT THE PLACE LIKE A FUCKING HOTEL.

By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across.

TheMyriad of comments my original post has spawned has gone some way to show that the issue is confusing enough to be important, as all important IT issues are.

I am deeply saddened, however, to see that <i>none</i> of you wanted a pint.

Mine's the long black woolen job.

The origin is hardly relevant, and the current usage does go beyond screen markup (unless anyone using printer-specific css is just violating the laws of the universe/w3c/self-proclaimed minimalist HTML dictator). Even for visual markup it makes sense to distinguish between italics and emphasis. Perhaps at some point in the future, the web author will want to use bold instead of italics for emphasized text, or change its color or size. Using straight italics tags everywhere, it's not doable. Otherwise... em { color: red; }

I would like <em1> <em2> <em3> just like headers. I dont have a use for it but seems a good idea at 11pm after a long week.

I agree that this separation of semantics is what the w3c is aiming at but as Ken Hagen pointed out it is not supported by the underlying language. The exclamation mark is a specific presentation of a supposedly semantic element. Of course those fools back in the middle ages didn't think to invent CSS for their printing presses so its just something we will be stuck with for a while yet.

Just take a deep breath and accept that the underlying language that you are rendering was never designed to support this separation of presentation from semantics. Then relax.

It seems to me that a "tagged" approach to increasing emphasis will result in SENTENCES THAT USE ALL CAPS or *Excessive* Punctuation!!!! to make their "emphasis", rather than using creative and appropriate use of words alone to emphasize and accent points.

Why not use existing (and sufficient, IMHO) tags along with creative writing in lieu of automating "emphasis"?

Then again, aren't all up-and-coming web designers graduating from the MySpace School of Web Design, which is entirely populated by L33t Teenz what Can't Write Good?!?

My coat's the leather one. I'm off to the pub.

Schrödinger's cat is <blink>not</blink> dead

"The exclamation mark is a specific presentation of a supposedly semantic element."

I don't think so, which was why I tagged my post as a joke. In modern English, punctuation is pretty much "content-free" apart from full stops and question marks. Whatever rules you advocate for the remaining marks, I'll be able to find a vast corpus of material which doesn't follow them.

The whole idea of semantic markup is seemingly beyond the vast majority of the people writing web pages. Perhaps this is because it isn't part of normal written English.

The downside to removing presentational markup from HTML and transferring it to CSS is code bloat. While I understand the logic of using only CSS for presentation and HTML for semantics, some markup is still useful for quick emphasis. Take the following example:

<p>Cats <i>are</i> cute animals.</p>

<p>Cats <span class="italic">are</span> cute animals.</p>

In a large block of text, where many items are emphasised (as in a list or a diatribe), this clutters the source with extra code, making the source harder to read.

Also, until Microsoft come to the fold and actually make a version of Internet Suxplorer which is really W3C compliant, there's little point in updating anything, HTML or CSS. Anyone who's designed a site using floating divs + CSS instead of the now-deprecated tables will fully understand the hair-tearing frustration of making that site display correctly in IE as well as any other browser. And even if Microsoft were to release a W3C-compliant version tomorrow, the residuals of past versions will still haunt web developers for many years to come. We'll still be using tables and presentational markup in 5 years time, for all the numpties still using IE 5 and 6.

It's easy to poo-pooh semantic markup if you don't understand what it is, or why it's desirable. Y'all probably still use table-based HTML for layout, too.

@Steve Roper:

I've made countless layouts using floating divs and CSS, and my sites look equally good in any browser. Granted, at first coding for IE6 is a pain, but once you understand its quirks, there's very little you can't do. IE7 is a huge improvement, and has very few CSS bugs. If you use conditional comments, then it becomes even easier to deal with Microsoft's browsers.

If you're interested in learning more, I suggesting checking out the #css IRC channel.

http://www.css-standards.org/

I have chosen Paris Hilton because even SHE could be expected to have known all this without having to read about it in El Reg. This just in..."Pope - catholic!"

If they are going to introduce the Em for emphasis, surely they should also introduce the Er. As in, do you <er> come here often. Or, Ooh <er> Missus!

Can be used anywhere to indicate doubt and uncertantity. Could be very useful for journalists reporting on political matters.

LaTeX (and, presumably, TeX before that) have long had \i and \em as separate indicators of italics and emphasis, and the semantics seem to be similar -- nested \em's give added emphasis, which is typically done by reverting back to non-italics at even nesting (which is what you will see in most printed books).

HTML can still learn a lot from LaTeX, which was a semantic markup language long before HTML and used separate style files long before css.

"In modern English, punctuation is pretty much 'content-free' apart from full stops and question marks."

Somewhat ironically, I missed qotation marks from that short list.

<div>Cats are *****ing cute animals</div>

<div>Cats are really *****ing cute animals</div>

<div>Cats are really *****ing cute animals and if you argue with me I'll cut your *****ing legs off</div>

Of course cats aren't cute at all - that look they give you is because they have never got over being worshipped as gods

I've moved to using CSS as much as possible but it certainly doesn't separate semantics in any meaningful way. It could do if browsers were uniform in their implementation of the standard and if developers used it properly but neither of these seem to happen.

By the time you've nested your divs (or whatever other cheats you've used) to get, for example, equal length columns you've polluted your HTML with presentation directives to my way of thinking.

With regard to <em> my English teacher told me that resorting to bold or italics is a sign of poor grammar. Sadly I have to agree with her.

No one has mentioned the <blink> tag or cheeseburgers yet. So...

http://icanhascheezburger.files.wordpress.com/2007/10/lolcats-funny-pictures-blink.jpg