Using Semantics Correctly
We all know to avoid using the
<i/> tags. We’ve also been taught that the semantically correct versions to use are
<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.
<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
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.