Ade

The strong and em tags are intended to reflect how the emphasised text would sound when read aloud. Text between b and i tags is not explicitly intended to be read differently: they provide visual emphasis for text that should be highlighted to visual users while not necessarily being read or heard differently. An example of that is the italic styling that is applied to titles of works, like a book title or the caption for an image of a painting. It is also used for certain technical terms, foreign idioms, taxonomic names, etc. and it can be used to highlight key words in an article to attract the reader's attention. These are more than solely presentational because they have a function that goes beyond style. The HTML 5 spec explains this in sections 4.6.15 and 4.6.16, and even though we are not yet using HTML 5 all the time, this part of the spec is worth noting. It shows why we still have b and i and why we still use them. Both types of tags carry semantic meaning and both types are valid, but for different purposes.
 
If text needs visual emphasis but aural emphasis is not appropriate, you can use b or i; if text should have aural emphasis, use strong or em and style it to suit if a corresponding visual emphasis is needed as well (which it usually is). The semantic usage is the primary differentiator here. Just don't assume that using one type of tag over the other (or none) will help users of screen readers: it doesn't necessarily do so with every reader or with standard settings.
 
Some developers cite the separation of presentation from structure as a reason to use span tags to create bold or italic text. But spans are semantically meaningless. Using a span to style text purely for appearance is perfectly acceptable and recommended, but using it to make bold and italicised text for my examples would be inappropriate. Turn CSS off and the visual meaning is lost. That would be little better than placing heading text in p tags.