All though I have been doing web design and development for a short few years, I have never actually known what the point was for swapping <strong> and <em> for <b> and . I knew it was best practice, but never really bothered to look up and understand why I made this switch. I finally got the chance to research why the <strong> and <em> tags are preferable and also if there were suitable situations for the use of the <b> and <i> tags in XHTML documents.
Since I knew it had something to do with accessibility, this is where I started from.
After reading the chapter on "<STRONG>, <EM> AND OTHER PHRASE ELEMENTS" in Web Solutions: The Markup and Style Handbook and a few blogs I discovered it basically comes down to Presentation vs. Structure.
The tags <b> and <i> have no meaning other than just rendering text as bold or italic. So these are just presentational tags.
<strong> and <em> on the other hand, give extra meaning to the text. This means that when a screen reader is being used it can change it's pitch, rate or volume accordingly when these tags are used.
<strong> is normal rendered by most browsers as bold text and <em> is normally rendered as italic text. If you wanted emphasized text to be displayed as both bold and italic, one of the best solutions is to create a class in your <em> tag and set the font weight to bold in the CSS for that class. There are other ways to solve this, but is the interest of keeping mark-up to a minimum, I think this is the most effective solution.
