<i> is not evil.
by Robert Mohns - June 3, 2008 / 8:47am View more articles
One of the greatest accomplishments of the web standards movement has been successfully convincing web designers and developers to create semantic markup for web pages. But, like any movement, it can become blinded by its own ideals and forget the meaning of changes.
Case in point: the italics tag <i> has been deprecated in favor of the emphasis tag <em>.
Purpose: Italics are usually used for emphasis, therefore, use the semantically-oriented emphasis tag instead of the style-oriented italic tag.
So far, so good.
Now, let me draw your attention, for a moment, to one of the books currently set out for visitors in Dave's office: Web Form Design: Filling in the Blanks by Luke Wroblewski.
Let's view source: <i>Web Form Design: Filling in the Blanks</i>
Note the use of italics tag intead of the emphasis tag. Why? Because it's not about emphasis, but distinction. A method is needed to make the title distinct from the surrounding text.
Thanks to centuries of typographic experimentation, evolution and standardization, we already have a method for accomplishing this: Italics are used to set out book titles as distinct from the rest of the text.
Let me recap that: The <em> tag is semantically inappropriate in this context.
Which leaves us with several hundred years of practice to fall back upon:
The much-maligned italics tag.
Reflexively replacing all instances of <i> and <b> with <em> and <strong> is a mistake... and a violation of the spirit of the semantic web, because those semantic elements are not always correct for the uses they are put to.
UPDATE!
To my surprise, this post was picked up on Reddit (where there is some great discussion). And, it's been pointed out by a commenter here that my example was a poor choice, because the cite tag is specifically designed for article names (such as book titles). So, I was wrong.
Still, there are quite a few other valid uses of the italics tag which are not accounted for in the available HTML tags (see below). So, I posit that <i> is still not evil.
But don't use it for book titles. Use cite. :-)
Finally, I would like to request that commenters please be civil. I expect some snark, but please avoid personal attacks. I would hate to shut down comments on this entry, because there have been some very informative comments already.
Thank you. —Robert
42 Comments
Dave's office: [span class="book_title"]Web Form Design: Filling in the Blanks[/span] by [span class="author"]Luke Wroblewski[/span]
It is more appropriate to extend an existing object with a relevent base meaning than to create new one objects out of whole cloth. The truly semantic web developer recognizes this. *grin*
Also, I think the main reason you don't want to use [i] is that it specifies presentation rather than meaning. I think, too, that it's a bit too general to say "it's about distinction." All the typographical tags are about distinguishing some text from the rest.
Saying that a title of work should be 'italicized' is then the problem. It shouldn't be italicized at all.
http://www.w3.org/TR/html4/struct/text.html#edef-CITE sez "Contains a citation or a reference to other sources."
http://www.htmlhelp.com/reference/html40/phrase/cite.html sez "The CITE element is used to markup citations, such as titles of magazines or newspapers, ship names, references to other sources, and quotation attributions. Visual browsers typically render CITE as italic text, but authors can suggest a rendering using style sheets. Since CITE is a structural element, it carries meaning, making it preferable to font style elements such as I when marking up citations."
Robert (author) sez "The truly semantic web developer recognizes this. *grin*"
@Robert: How cocky. You think you're correct. You shoot down another developer/designer while reinstating your elevated ego. Your example is wrong. Period. The truly semantic web developer does not recognize clearly..
Dave sez "@Nick If you're not spending at least 80% of your work day arguing about semantics, validation, operating systems, or indent style, you're not a web developer."
@Dave: When you're sufficient in semantics, validation, & operating systems you understand them enough to avoid silly arguments entirely on the basis that there is usually one correct way to interpret these concepts properly. When a fool surrounds himself with fools he's sure to discuss foolishly.
Gary sez "Not all fonts have italics but instead have obliques (most sans-serif fonts), so using the [i] shouldn't work in those cases, but it does for whatever reason.
Saying that a title of work should be 'italicized' is then the problem. It shouldn't be italicized at all."
@Gary: It should be italicized. Here check it out: Robert (author) sez "Thanks to centuries of typographic experimentation, evolution and standardization, we already have a method for accomplishing this: Italics are used to set out book titles as distinct from the rest of the text." I do agree with this statement. Don't let a font designers ineptitude change your worldview of typographical design.
Nick sez <<@Dave, since they added "Senior" to my title I no longer argue, I "Delegate" arguments about semantics, validation, operating systems, or indent style.>>
@Nick: Since "they" (hah) added "Senior" to your name and gave you a bump in salary you've now reached the heightened status of "delegating" the same bullshit arguments you never should have participated in in the first place.
@Egypt: Spot on
brothersister :). Love the design.Why the harshness? Standardistas that think they are but aren't are damaging to the overall ecosystem of standards -- especially when you blog incorrectly and troll the comments section incorrectly.
Also, @Nick, since when was "free time > work" a bad thing? :)
*ahem*
I concur with @Egypt above... isn't the cite element the most semantically applicable tag for titles of printed media?
http://blog.ianbicking.org/2007/08/14/of-microformats-and-th...
i says, do italics. em says emphasis.
One is style, one is semantic. One says, make text italic, but why, the other says, emphasis something. (Doesn't say why though!).
The guy saying that you should create a class to distinguish is utterly correct.
[class="title"]
You can distinguish it on screen in one way, on print another, and for screen readers, you can add emphasis if you want, or not.
By that, I assume you mean it rendered your HTML. Crazy, I know! You added an HTML tag, the lame CMS outputs exactly what you entered, and your web browser renders it.
I fixed your comment, replacing your raw html with entities.
class="title" would be correct, as long as it exists as an attribute of the cite element.
Semantic markup is interesting only if there's something you can *do* with that information. I assert there is nothing useful you can do with the distinction between i and em, except perhaps for some exceptional places where you have a walled garden of content and you've created and maintained a distinction. In the rest of the world there is no reliable distinction between the two. You cannot use the distinction to any end because the point of markup is to determine the author's intent, and there's no reliable intent that is communicated through this choice of tags. Sure, you can come up with rules about when to use the different tags, but you can't come up with reliable rules about how to interpret the different tags. You can't just make up rules and have people automatically obey them. Without a plan to get people to write to your rules, your rules are meaningless.
@Robert: No response?
Brutal indeed. Deserving? Yes. Why?
Correct.
Use <I> instead? Incorrect.
No mention of CITE.
You've unintentionally infected Reddit, Google, and likely the blogsphere as a whole (via Technorati, etc..) with misinformation and have not posted a correction regardless of comments found below. That's just irresponsibility.
On that note, I agree that designers should continue to use <I> for the reasons not related to citation or emphasis contained here: http://en.wikipedia.org/wiki/Italics#When_to_use
As for the arrogance previously noted in regards to Robert and Dave.. It seems you guys work together.. If this had been a personal blog I would have ignored it entirely. You guys represent a web design company and your comments and that little iMarc logo command a certain expectation of quality.
And now for Ian's take on this damned little <I> tag: what's right is what's known and understood. We can all sit and pontificate the true meaning but what it comes down to is how Google, Firefox, et al. interpret them..........
**yawn** Correct your post or stop posting. That's my opinion. Brutal? Sure.
As for the CMS, am I supposed to encapsulate my paragraphs in P tags to get them to break properly? The comment input field should parse and render appropriately. I can't believe I have to use manual encoding..
http://www.simplebits.com/notebook/2003/09/25/simplequiz_tit...
As he mentions, "if you’re simply stating the title of a book, are you really citing it?" I'd tend to say no.
Another interesting tidbit from the simplebits comments was someone saying that he was from Estonia where the standard is to put book titles in quotes, not italics. In my mind, this gives more credence to using a tag that describes what the content is — <span class="book_title"> — The presentation could theoretically be localized.
@Angelo You used the <q> tag in your response. That was messing up the display. The CMS didn't properly identify that tag as an inline element and assumed you were using block-level tags. If the CMS notices block-level HTML, it won't add breaks for obvious reasons. I fixed the backend.
Angelo, you are the Leonardo da Vinci/Tucker Carlson of blog commenting.
Hat's off.
@Angelo: Despite your abrasive ad hominem attacks, I've enjoyed your contributions. As for not correcting the post ... I want to let the stream of (unexpected) comments settle down before deciding what to incorporate. I do plan to post an update; whether someone posts it to reddit is beyond my control (I was quite surprised to see it picked up).
And as Dave notes,
citeis not really the appropriate tag to use for a book title. It is commonly used for this, but I do not feel that is a proper use of the tag's original design intention.However, I must note that the W3 XHTML 2.0 workgroup feels otherwise, and explicitly use
citefor a book title in theirciteexample, in conjunction withquotefor the excerpt cited.And, the HTML5 spec is even more specific, noting that
citemust be used only for the titles of works.However, this is getting bogged down in a single example -- which, obviously, was poorly chosen, because I was wrong. :-) Other accepted uses for italic which are not accounted for in the various HTML specs include the names of ships, foreign words, use of a word as an example of itself rather than for its semantic content, introducing new terms for definition, and (Italic type - Wikipedia).
iremains not evil.A final note (well, for the moment). The
qtag is deprecated. Arguably you broke the CMS, not the other way around. ;-)Your opinion is to tend towards "No". The author of that SimpleBits article is a bit more flexible in his judgment. He seems to be swayed by the fact that "most" browsers italicize <cite> contents. His skepticism seems to lie in the uncertainty of widespread browser support. It's been 5 years since that post and it is my opinion that browsers support the
I downloaded the Estonian language pack to my FF 2 and much to my surprise it did not render the citation properly (using quotes instead of italics). If I were Estonian and it bugged me I'd file a feature request using a Greasemonkey script in the meantime. To suggest that deviating from the semantic richness of <cite> in place of custom CSS brings us back to Ian's post. Neither Google nor Firefox will know what it means. To further this concept. Say I was a researcher. I'd surely tune my Firefox to visually acknowledge citations (via double underline, icon to the right, icon in the status bar, etc..) allowing me to quickly run searches at Amazon.com, OpenLibrary.org, and research databases I'm a member of. This is clearly possible by use of the <cite> tag. This is clearly impossible by use of custom CSS *unless* we standardized a set of classes for this purpose (like Microformats). But wait.. it's already been standardized! DRY.
@Robert:Again I'd err on the side of using <cite> since it's machine readable. We're not talking about English 101 and parenthetical citations here: http://www.barnard.edu/english/reinventingliteraryhistory/pl...
What we can all take out of this is a) the difficulty in coming up with standardized solutions and b) the lack of coherence in the standardization community. I like how you referenced XHTML 2.0 and HTML 5, both being on the forefront of markup standards. But wait.. which one do we use? Keep in mind that your post is rendered in XHTML 1.0.
@Patrick:Speaking of ad hominem attacks.. It's so clear you're "that guy". Go watch a South Park, ice that sweet bruise, and leave the discussion to the adults.
@iMarc:Dave sez..
I see you added: Prior to my complaint you didn't even specify that you accepted HTML nor that it was necessary (I still don't even know if it is..).
Robert sez..
Damn. I was so close to apologizing for my abrasiveness.. The <q> tag is not deprecated for XHTML 1.0, again, in which your site is rendered.. Care for a more formal spec? http://www.w3.org/TR/xhtml11/doctype.html says You must be confused with XHTML 2.0's <quote> tag. Neither we (the community) nor you (iMarc) are there yet.
Word of advice: scratch HTML input in the comments entirely and use markdown instead. I love HTML. I hated having to tag and encode my comments manually... Furthermore, I don't even have a "Preview" facility. Do I proofread this in another tab before posting? Well here goes; hope it all renders properly.
Never would have imagined <i> would cause so much grief. :)
No kidding :-)
Regarding Markdown, you might want to check out the Wysiwym Markdown Editor project. (The author is even working on a version to be released under the MIT editor.) It's a possible way to bridge the gap between "what i type" and "how i want it to look"... (Markdown is great, but not many people know how to use it yet.)
@Robert: Neat. It looks like Markdown + Showdown with keypress event handlers. I'm in the need for just this at the moment and was about to mash the two up in a jQuery plugin to achieve the same affect. Thanks for the input.
@Nick: As director of development I would have expected you to be a bit more wise. The page contains the perfect amount of information to identify exactly who I am and how to contact me. It contains my name, affiliation, general location, and two preferred methods of contact. It also contains my hCard and serves as my OpenID delegate. I don't feel the need to say half the crap you guys do. That's my opinion and you're entitled to yours. However, in honor of your comment and on behalf of this fabulous thread I've gone and updated my webpage. I suggest you all take a look -- Patrick in particular. :)
I find it comical that several of you are fathers. From your words and your pictures you guys seemed to be closer to my age..
Now in an attempt to finalize things here please see the Reddit comments for your post, this thread in particular.
Go ahead and click "Reply" to either post and click "Help" beneath the resulting textarea. Now scroll up through the entire comments section of this post and give me one example where those 5 features would leaving you wanting more control over markup.
Now "Cancel" the reply and read the comments. The reason why I made my first post was that your words, Robert, may have been specific to an audience that you are comfortable with but were, in actuality, cast upon the world as a whole. Some kid subscribed to your feed here in the states (who won't see comments) or even some kid in China who translated your page could have been mislead by your post. Furthermore, 1,000 people (keeping with proportions of the 80/20 rule) could stumble upon this post (no pun intended).
I'll leave you guys with a quote from Tim Berners-Lee himself. Please tell me you've heard of him.
Word. I hate IE. See how that works?
I mean did you even read the above comments? Do you really think I'm that incompetent? Really.. Guess what I did when I was modifying the source: changed the file name from index.html to, wait for it, index.xhtml. Why, you might ask, would I have made such a significant change to simply add an image and a list?
Here's the best part: I wanted to see how many of you use IE as your default browser. You know, "eww, it's even uglier than it already was" or "I can't believe you call yourself a designer, Mr. Salvador Dali." So, the way I see it, you either a) use IE as your default browser *ahem* or b) tested my site using multiple browsers to try to catch me on something, anything. Well kudos to you Mr. Director, I caught you. In case you're still not convinced, let's glance at how I'd fix this in a production-level environment whereby I couldn't simply revert the file's extension:
You wanna play games? Your page doesn't validate XHTML 1.0 Strict. Good thing you just straight serve text/html and not even worry about it.... Pathetic.
Enough? Of course not since Nick sez..
I just lost what little respect remained for iMarc as a Design/Development firm. You might take a page out of Robert's book and learn that a little bit of humility can go a long way. That was, after all, the motive for my initial rant. Should I even have to explain this to you?
So now, unless I'm propositioned with another dose of tomfoolery, I'll leave you and your "Senior" title to amongst your team. Do the world a favor and don't blog about it. In other words, I'd never in a million years approach you or your company for a job.
You couldn't have left it at fun and games and serious discussion of semantics? Now you're going to have to kill this post and cover up your tracks. Guess I'll just have to cache it for memory's sake. I'll leave the URI in tact as it'll be a painful reminder that indeed <i> can be very, very evil. :)
Yup.. At first I thought all commentors were random people from the web. Then I realized several were from iMarc. I considered Nick's to be a jovial inter-team comment from "Senior" == "Director" to staff.
Boy was <i> wrong. You were right, Robert, had I discovered that earlier much could have been avoided..
The sincerest apologies to iMarc and especially you Nick Grant. You too Patrick. :)
For the sake of transparency and since every single one of your posts thus far have been sarcastic, here's what that nice email contained:
I hate to shoot a dead horse on someone else's farm but let's recap your intellectual input throughout this discussion.
You offered absolutely zero value. One might even go so far as to say your presence had a negative impact on the discussion.
Harshness aside I know that I at least attempted to cast some light on the discussion. The last couple of posts were harsh for all the wrong reasons, you see, for I made the horrible mistake of grouping your worthless input with that of the iMarc team.
It turns out iMarc's team had very good things to say not to mention I agree with the contents of the original post and have myself learned something from investigating things to the extent we did.
Your e-mail response..
As my work on the web revolves around digital identity this thread has been more than just a professional lesson -- it has reinforced Who Is the Dick[/Nick] on My Site? ten times over. Excellent powerpoint presentation on Identity 2.0 for anyone interested.
As for the faceless part.. I posted my face. My demeanor didn't change. I was actually expressing humility which I have good reason to believe was received well. You, on the other hand, could have been forthright and provided your full name saving me the research (DNS, MySpace, ...).
Your marshmallow/nerf analogy speaks volumes on your behalf. So do the words you so arrogantly stand behind. As for your site.. Coldfusion's your backend. You're serving vanilla text/html.. with tables and form fieldsets strictly for presentation. At the risk of sounding whiny whyyyyyyyyyy are you involving yourself in a discussion of web semantics?
I felt the need to defend that last statement and to one last time reiterate that the iMarc team has shown personality, compassion, and a rigorous respect for web standards and design. I apologize one last time for the conclusions I jumped to.
@Nick: If you really feel the need to take this any further a) please don't and b) keep it in the mailbox.
p.s. don't use underscore in naming classes/ids.
I've been building since connections were 2400 baud and it always changes. Yes, my code passes validation. No it doesn't have browser detection cause its not necessary. [i] is not evil [em] is not evil. its all just a way for you guys to say the other guys suck.
I think there is some sort of misunderstanding here. The reason standards and semantics are talked about so much is mostly the end user, and partially those who must maintain the site. I think you'll notice that most of the web community pushed these topics because they believe it makes a better experience for everyone.
Sites built with standards are good for end users because no matter what the web browser, it should be able to display the content is some sane way. Sites built with standards are good for maintainers because they are more likely to not break when new versions of browsers come out.
Sites built with semantics are good for end users because intelligent spiders and other computer programs can actually extract the meaning of content by the tags. Sites built with semantics are good for maintainers because things tend to be more clear. When you don't use presentational adjectives in your CSS class names, is it much less likely that changing the style of the class will confuse future maintainers. Nothing is more confusing than a .wide_column that is narrow or a .blue_box that is red.
@Robert
I would tend to disagree with you that the <i> tag should ever be used in HTML. It is never semantic, because it only conveys style. If you need something that is not going to be emphasized, the proper semantic way to mark it up to to explain what it is. I would mark up the book title as <span class="book_title">. This way you can actually style all book titles with whatever works on your site.
Perhaps you will have a different background color or increase the font size in addition to making it italic. These would be impossible with a simple <i> tag (i.e. no CSS class). If you then add a CSS class, it is entirely possible someone would change the font-style of i.book_title at some point to no longer present it as italic and then you are confusing maintainers.
tag. In the past 15 years, "the way it MUST be done" has changed about 15 times. and 2. Stop Browser whining. Firefox is good. IE is good, Safari is, well, Safari and good. I don't care what anyone uses. Just write good code that works in all browsers with no hacks. I have 80 domains out there not one single browser specific CSS hack anywhere. Maybe its 'cause I'm old but seriously 35+ comments on a italic tag. jeez.