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:

8 Comments

  1. I thought there was something wrong with your feed, but alas, there is not. You’re just geekin’ out.

  2. Well it looks better now :)

  3. I think I actually geek’d out sometime during the 6th grade. What happened above (and in my feed) was a missing closing tag that somehow caused Movable Type to wrap this whole entry in a <pre> tag. I never noticed it because for some reason my front page, which pulls the text from the db, looked normal.

  4. I thought it was a simple semantic argument: “How does a text-reader pronounce bold?”

    Which is sort of the same thing you said, but represented in a way that doesn’t need as many examples of what "structural" really means.

  5. You know, I’ve thought a lot about this, and I really want to give <b> and <i> back to the developer community. I find that although though the intention is good, <strong> and <em> are in actual practice used in exactly the same way as their one-letter counterparts. In other words, I really don’t believe that there is any semantic difference whatsoever between <b> and <strong> or between <i> and <em>, and in the case of italics, in some cases are actually used opposite of what the <em> tag is meant for. For instance people might want to italicize a photo credit, so they use <em> thinking it has more semantic value. But are they really trying to emphasize the photo credit? Usually they’re trying to make that text appear “lighter”, in other words to differentiate it from other nearby text without adding the appearance of additional importance. They are in fact de-emphasizing the snippet of text, not emphasizing it.

    Really the question of what holds greater or lesser semantic weight is a red herring, in my opinion. When encountering some text that a web developer would like rendered in italics, the question shouldn’t be between <i> and <em>, but rather whether there is some other even more appropriate markup structure they should be using.

  6. Good argument Mark. I tend to agree, especially with italics. If you only want italic styled text with no underlying emphases suggested, using <i> makes much more sense than say, using an italic styled <span> tag. As I said before, I started using <strong> over <b> and <em> over <i> simply because I noticed a trend. I had no idea what the semantic argument was at the time and I think most people avoid <b> and <i> out of ignorance.

  7. I asked for a site review somewhere and got beat over the head for still using the deprecated and , so I think most people think that we are not to use them any more. I use them just to make particular words stand out visually, no emphasis intended.

    Your explanation makes it a bit clearer – I think I can stick with and .

  8. too much tags to know about everyone…

Leave a Comment

See Life Through My Eyes
Somewhat Recent
The Whole Nine Yards