What's the difference between <b> and <strong>, <i> and <em>?

Here's a summary of definitions together with suggested usage:

<b> ...a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

<strong> ...now represents importance rather than strong emphasis.

<i> ...a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

<em> ...indicates emphasis.

(These are all direct quotes from W3C sources, with my emphasis added. See: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements and http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 for the originals)

<b> and <i> are both related to style, whereas <em> and <strong> are semantic. In HTML 4, the first are classified as font style elements, and the latter as phrase elements.

As you indicated correctly, <i> and <em> are often considered similar, because browsers often render both in italics. But according to the specifications, <em> indicates emphasis and <strong> indicates stronger emphasis, which is quite clear, but often misinterpreted. On the other hand, the distinction between when to use <i> or <b> is really a matter of style.

I'm going to hazard a historical and practical hot take here:

Yes, according to specifications, <strong> had a semantic meaning in HTML4 and <b> had a strictly presentational meaning.

Yes, when HTML5 came along, new semantic meaning that was slightly different was introduced for b and i.

Yes, the W3C recommends — basically — TL,DR; don't use b and i.

You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages. You should not use b and i tags if there is a more descriptive and relevant tag available.

BUT:

The real world internet has massive loads of existing HTML that is never going to get updated. The real world internet has to account for content generated and copy and pasted between a vast network of software and CMS systems that all have different developer teams and were built in different eras.

So if you're writing HTML or building a system that writes HTML for other people — sure — definitely use <strong> instead of <b> to mean "strongly emphasized" because it's more semantically correct.

But really, the on-the-ground reality is that the semantic and stylistic meaning of <strong> and <b> have merged over time out of necessity.

If I'm building a CMS that allows any pasting of styled text, I need to plan both for people who are pasting in <b> and mean "strongly emphasized" and for people who are pasting in <strong> and mean "make this text bold". It might not be "right", but it's how the real world works at this moment in time.

And so, if I'm writing a stylesheet for that site, I'm probably going to end up writing some styles that look like this:

b,
strong {
  font-weight: 700;
  /* ... more styles here */
}

i,
em {
  font-style: italic;
  /* ... more styles here */
}

Or, I'm going to rely on the browser defaults, which do the same thing as the code above in every modern browser I know of.

Or, I might be one of probably millions of sites that use normalize.css, which takes care to ensure that b and strong are treated the same.

There's such a massive ocean of HTML out there in the world already that works off of this expectation, I just can't imagine that b will EVER be depreciated in favor of strong or that browsers will ever start displaying them differently by default.

So that's it. That's my hot take on semantics, history and the real world. Are b/i and strong/em the same? No. Will they probably both exist and be treated as identical in almost every situation until the collapse of modern civilization? I think, yes.

While <strong> and <em> are of course more semantically correct, there seem definite legitimate reasons to use the <b> and <i> tags for customer-written content.

In such content, words or phrases may be bolded or italicized and it is generally not up to us to analyze the semantic reasoning for such bolding or italicizing.

Further, such content may refer to bolded and italicized words and phrases to convey a specific meaning.

An example would be an english exam question which instructs a student to replace the bolded word.

<em> and <strong> consume more bandwidth than <i> and <b>.

They also require more typing (if not auto-generated).

They also clutter the editor screen with more text. I seem to recall that programmers like smaller source files if they are the same. (And let's be real, they are the same. Yes, there are "technical" (cough, ahem, excuse me) differences, but that's mostly phony to begin with.)

With any of the above tags, you can use style sheets to customize how they appear to however you want if you need them to appear different than their defaults renderings.

b or i means you want the text to be rendered as bold or italics. strong or em means you want the text to be rendered in a way that the user understands as "important". The default is to render strong as bold and em as italics, but some other cultures might use a different mapping.

Like strings in a program, b and i would be "hard coded" while strong and em would be "localized".

As others have said and are explicit (i.e. "make this text bold"), whereas and are semantic (i.e. "this text should be emphasised").