Jasongraphix

Bold Strong Italic Emphasis

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:

• SimpleQuiz XII – Empholdics (& Conclusion) by Dan Cedarholm – February 26 & 29, 2004
• <B> vs. <STRONG>, <I> vs. emphasis – A mailing list conversation about the topic from January 12, 1994.
• Strong is wrong by Jonny Axelsson – March 31, 2006
• Emphasis in context versus overall highlighting by Jukka “Yucca” Korpela – April 18, 2004
• Semantic Markup debates: <b> versus <strong> by Faruk Ates – March, 31, 2006