A coworker asked this question. It’s curious that this HTML change occurred. Most front end developers are aware that the <strong> and <em> are preferable as they are accessible styles, meaning that they encourage screen readers to note their existence, whereas <b> and <i> are ignored. But why did the HTML lords not just change the action of the <b> and <i> instead of adding new tags?
After searching for sometime, and finding many different theories, one person, Tony Andrews, had the perfect explanation:
<i> are explicit – they specify bold and italic respectively.
<em> are semantic – they specify that the enclosed text should be “strong” or “emphasized” in some way, usually bold and italic, but allow for the actual styling to be controlled via CSS.
Hence these are preferred in modern web pages. And there you have it.If you want to dive in deeper, here’s a nice long article.