[b] and [i] versus [strong] and [em]

I think it has finally reached critical mass. The concept of separating presentation from content is a widely accepted practice. So why do we have <b> and <i>?

I imagine a few will like a rehash of this concept, just for the sake of discussion, if nothing else.

The driving force behind separation of presentation and content, and the phenomenon known as the semantic web, come from a singular source: accessibility. But what does accessibility mean or entail?

Thinking of accessibility is useful even if our audience does not consist of blind folks using screen readers. Accessibility is a driving force that can be used to help us forge a new path towards a cleaner, more efficient web. Accessibility as a concept reveals weaknesses in any non-compliant website in such a way that it has become useful as a synonym for compliance. Therefore, if you approach designing a website's source code from the perspective of it being read by a screen reader, you will be able to write compliant and semantic websites from the start, and your content will have meaning outside the scope of a modern visual web browser. This is an good and important start.

So back to the point. Why <b> and <i>? If we examine the trends of the w3c in defining new web standards over the last four to eight years, you will notice that tags that add semantically meaningful information to documents have been introduced, while tags that only specify presentation have been purged from the standards. The <font> tag is the best example of this. In the late 90's, the web was so cluttered with horrendous html documents that were so bogged down with presentational markup that they were virtually useless, not to mention unmaintainable. The new standards have saved us from a slow and horrible fate, and for that we are thankful.

However, the final two truly presentational tags, <b> and <i>, are still around and in high use. What makes them different, and why haven't they gone away? If you examine how a person would go about designing a document that has lots of bold and italic text that should not be read with emphasis in a screen reader, you will begin to see the usefulness of these tags. You can theoretically imagine that <b> and <i> are simply synonyms for the longer and messier <span style="font-weight: bold;"> and <span style="font-style: italic;">. Since they are so absolutely useful, they have been allowed to remain in the standard, though they are likely going away in XHTML 2.0, which may make this entire thing a moot point. Even so, as long as they remain, one could argue that they can and should be used for presentation, since they are about the only presentational tags imaginable that don't clutter up and bog down your document.

Basically, keep accessibility in mind when designing documents. Imagine how you would want your document read in a screen reader, and you will come out ahead. If you have trouble with <b> and <i> tags, just use css. The only trouble that you could come across is making your styles too specific. For example, if I wanted to replace <b> and <i>, I may make some css styles like:

span.bold {
font-weight: bold;
}
span.italic {
font-style: italic;
}

To do this, however, would make your document pretty stupid. If you insist on using this approach (which is certainly your prerogative, and not a bad idea at all), you could do something like this:

span.attention {
font-weight: bold;
}
span.notice {
font-style: italic;
}

By doing this, you would be declaring that you have visually impactive sections of your document that are still simply text, and shouldn't be interpreted as anything else, except visually. However, one could still argue that maybe you should have just used <strong> and <em> in the first place, but there are always reasons you don't want that semantic baggage in a certain situation.