« October 2006 | Main | December 2006 »

Bold Strong Italic Emphasis

November 08, 2006

Anyone who's been doing webdesign since the days of nested tables and spacer gifs should be familiar with the classic bold (<b>) and italic (<i>) HTML tags. In the last 5-6 years though, those oh-so-easy-to-remember tags have silently slipped into oblivion. I know that I personally have been using <strong> in place of <b> and <em> in place of <i> for at least the last 3-4 years when I noticed the changing trend, but I never learned the proper reason why.

So, when I was asked today why someone should use <strong> rather than <b>, my initial thought was that the tag was deprecated, but somehow I knew that wasn't true. Rather than immediately responding I decided to try to find a reputable answer. Unfortunately there are a lot more forum opinions and off-the-cuff blog entries out there than de facto documentation. While many sources gave the correct answer that <strong> and <em> were structural elements and that <b> and <i> were merely visual display tags I also saw people suggesting deprecation or that <b> and <i> should be used because they are shorter tags and therefore create less markup. Mixed in with all this mis-information, there were out-of-date "HTML Basics" tutorials like this one from Webmonkey that only teach <b> and <i>. With all this confusion, I was determined to find an answer directly from the W3C. After a little bit of digging, I came up with this explanation from July 6, 2000:

Initially, there were a pair of HTML elements whose purpose was to indicate that some portion of the text required emphasis; and this pair of elements allowed for two degrees of emphasis. The elements in question are the EM and STRONG elements. At a later stage, the elements for italic and bold text were added; these are the I and B elements. Here is an example of all of them, again as straight markup,

<EM>This is emphasized text.</EM>
<STRONG>This is strongly emphasized text.</STRONG>
<I>This is italic text.</I>
<B>This is bold text.</B>

and as rendered text:

This is emphasized text.
This is strongly emphasized text.
This is italic text.
This is bold text.

Now, the I element means, "render as italic text" and the B element, "render as bold". Obviously, these are both formatting commands. However, a glance at the EM and STRONG elements reveals that they are also rendered as italic and bold, respectively. What is the difference?

The difference is that if the markup is EM or STRONG, then the text is declared as requiring emphasis, but only that. It does not go further to declare how the text should be emphasized. On the other hand, while using I or B does emphasize the text, it does so in a purely visual way. "Italic" or "bold" are type setting directives for printed versions of the text. What if the markup were passed to a voice synthesizer to speak the text? How does one speak text that is bold? Using B commits one to a specific way of rendering the text, specifically, a visual one; when, what is really desired is a declaration that this text is somehow different and to allow the expression of that difference to vary depending on the medium in which it is rendered. Indeed, even within a medium, there may be constraints, such as screen real estate, that alter how emphasized text can be drawn. Thus, the use of EM and STRONG elements is superior in the sense that they describe the content without committing it to a specific format.

So, in a way, the old <i> and <b> tags are a lot like their disowned cousin, <font>. These tags are purely for display and add no structural meaning to the page. On the other hand, <em> and <strong> are purley structural elements. Although their default display happens to be italic and bold respectively, they are not equivalent to the display-only tags. What does this mean for your markup? Continue to use <em> and <strong>, remembering that they are two levels of the same structure - emphasis. If you have text that you want to style as italic or bold, but don't wish to emphasize, using <i> and <b> is no different than using a <span> with a CSS defined class. In my opinion though, the concept of having bold or italic styled text is to provide emphasis to that text, so using these old tags really should be avoided.

Other interesting reads on this topic:

TextMate is No Longer Evil

November 02, 2006

Even if you’re not on a Mac and therefore don’t use TextMate, you probably read about its little Halloween theme on other blogs and saw examples of it in flickr. I noticed the festive Jack-O-Lantern icon after the software update on October 30th, but it wasn’t until I opened a folder of files on the 31st that I noticed the cobwebs. I thought it was a fun little way to celebrate what I see as a harmless, American, pop-culture holiday.

While it was fun on Halloween, yesterday I was ready to get my familiar purple icon back and headed over to the Macromates blog to find out when that would happen. It was fun reading the comments about the Halloween theme but there were some mixed opinions about it. Apparently some people were really upset:

“…I found this offensive and promptly removed the theme. Please understand I do not think it is offensive because I am some fanatical weirdo. But the roots of Halloween are in animal and human sacrifices as well as rape in the name if Satan. This is not just something that happened hundreds of years ago, this happens today in abundance; in the U.S. Canada and UK. If you don’t believe me ask a Satanist or wiccan or do your own research. Many religions have an issue with the practice of Halloween including Christianity, Judaism and Islam. Even many Atheists don’t like it because of the animal and human damage done every year in relation to this event. That said, it really wasn’t the above reasons that offended me most but it was the fact that it was just assumed that I accepted this holiday and wouldn’t get offended. I am sure you wouldn’t have a Chanukah or Nativity theme so you wouldn’t offend people. The Islamic holiday Ramadan happened recently but I never noticed TextMate having a green theme with a crescent moon. How disappointing.”

After reading through the comment thread I decided that I’d just be patient and wait for the next software update. I really didn’t want to get involved there. Well, this morning the update finally came. Here is the applicable lines from the release notes:

[2006-11-02: REVISION 1324] [REMOVED] TextMate no longer pays tribute to human sacrifices, rape, nor does it show a picture of the God of the deaths in your dock — ticket 945BEB5D

That made me laugh. While I think the folks at Macromates stepped on a few toes when they decided to force a somewhat taboo holiday on their supporters, I think they handled the criticism wisely. What do you think? Should internationally popular websites and software applications try to do things like this to entertain people, or should they be emotionless and humor free?