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.

Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.