We all know to avoid using the <b/> and <i/> tags. We’ve also been taught that the semantically correct versions to use are <strong/> and <em/>, respectively. But it seems like these two tags are now being used just like the previous two: when something should be bold, we use <strong/> and when something should be italic, we use <em/>. I’m guilty of this myself, and I think it’s time we web developers put a stop to this.

The <strong/> and <em/> tags are supposed to have semantic value, not just stylistic value; they should be used to indicate something additional about the data. The <strong/> tag should be used to indicate something that is important, and it just so happens that browser interpret “important” to mean “bold.” Likewise, the <em/> tag is used to indicate that something should be emphasized. The latter is the one most often abused since emphasis is such a squishy description. For instance, we’ve all been taught to italicize book titles…this is not to say that book titles should be emphasized. It would make more sense to create a style for book titles that happens to italicize the text rather than using the <em/> tag.

There is a great description of how these tags should be used over in the Web Applications 1.0 spec for both tags. Good reading for semantics junkies.