What's the difference between <b> and <strong>, <i> and <em>?

They look the same viewed in normal web browsers, but there is a fundamental difference between them.

Think of three different situations:

"Bold" is an appearance, a style. When you say "bold a word", people basically know that it means to emphasize the letters until they stand out more amongst the rest of the letters. We know what "bold" is supposed to look like.

That, unfortunately, means nothing to a blind person. And on mobile phones and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.

The bold and italic tags were all about style, but with some media, like cellphones and PDAs, they can be useless, serving no purpose whatsoever. The concept of semantics falls into play here. Using <strong> is an indication of how something should be understood. What does that mean? "Strong" could (and often does) mean "bold" in browsers, so it appears just like any "bold" content. The difference is presented, for a blind person when a lower tone is heard via a speaking program like Jaws, or by the underlined text on a Palm Pilot (since you can't bold a bold). The bold and italics don't mean anything to the blind, but strong and emphasize do.

The <strong> tag is semantic - it describes the text it surrounds ("this text should be stronger than the rest of the text") as opposed to describing how the text it surrounds should be displayed ("this text should be bold").

Now, with HTML5, the <b> and <i> tags have become semantic, but older versions, they are only a matter of style, and not semantic. The HTML document author must know when to choose them over the <strong> and the <em> tags. Viewing the document over a PDA or cellphone is a good way to see the power of each element.

It has even been suggested by some programmers that the <b> and <i> elements must be used as a last resort...

What about the <u> and <ins> elements?

The same theory, I suppose, could be applied to the <u> and <ins> elements. In both cases, they are underlined, but so far, I haven't seen any "semantic differences." But then, I don't own every possible contraption in the world. (I heard that this is a "Chinese" thing, but that all went right over my head!)

Perhaps some future browsers might treat these elements in a way that makes sense to use inserted text. For me, there's certainly no tangible benefit from using <ins> just for underlining: the <u> is shorter markup and more widely supported!

Remember though that situations for underlined text should be avoided because links on web pages are often underlined. Newbies tend to click on underlined text and maybe have a conniption if the underlined text doesn't behave like a link!

The semantic characteristics should be applicable to the <cite> and <q> elements as well.

Table of Contents