Bold and italics are in no way stylistic choices with interchangeable meaning. Using the right one can be as important as using the right words. People are not understanding by decoding one word at a time, but through sentences that are meaningful and important as a whole. Italics have direct meaning in the context of what's being told. Bold communicates outside of that context, it has no control over the meaning, it's for the reader only. Understanding the difference is not only about accessibility and search engine optimisation, but it also shows that the correct visuals are created with the correct code.
Bold points to something else #
Bold draws attention. Not in order to point at its own importance, but usually at what comes next. It basically says “look at me, I have a great suggestion, how about reading the following text, this is what it's about”. That's why it should more or less be used only for titles and headings.
Using bold to emphasise words in paragraphs (inline) is like watching a movie with someone telling you to “watch this” every other minute. Attention is drawn from where you are, to the place you nevertheless will be in a few moments. It disturbs the coherency of the sentence and runs the risk of ruining the actual point and a meaningful total. Inline bold doesn't only render an ugly piece of text, it also messes up the reading. You are making an impossible claim; among the words you have chosen to convey a certain meaning, there are some words that are more important than the sentence as a whole.
If you feel you need to use inline bold, because something is that important, maybe it's time to rewrite. Try not to communicate too much at once, split it into smaller pieces, use headings and maybe a list.
Since headers usually come with heir own bold styling, we are left with only full paragraphs where we can use strong and b tags.
Using strong adds weight semantically, in the code, as well. Just like bold text visually competes with the headers, so will the code potentially. Considering that bold paragraphs might be used on their own, where using titles doesn't make sense, for instance in a short commercial message of some sorts, strong seems like the best fit. It's not a header and it is more important than plain text.
I see b only as a way of producing the visual effect when we don't really mean it. Either without making a separate style or when someone with a higher number of stripes on their shirt thinks the web should mirror their Word document. The computers see what we do and recognise that we actually know better. It becomes our little secret.
Italics are self-referencing #
Since bold shouldn't be used inline, we turn to italics to mark emphasis. Italics are also two different things, for which both em and i is needed. While humans can discern the different meanings based on visuals, computers cannot without specific code. For emphasis, it's imperative to use em. For styling titles, names, foreign words and other things that haven't earned any emphasis, but still need to be in italics, the i tag should be used.
Simple enough until we get to nesting, where we must still avoid bold. In such instances, it's helpful to remember that it's not the italic shape that provides meaning, but the difference from the surrounding text. It means that inside the italic text, the regular text has the same meaning.
We can nest tags to get the correct semantics in code and typography. This means that every other level should be regular:
em, i {
font-style: italic;
}
em em,
em i,
i i,
i em {
font-style: normal;
}Which renders the following example:
<p>Should I name the article <i>How <i>Avengers: Endgame</i> made <em>crazy</em> sense</i> or <i>Why <i>Infinity War</i> makes sense <em>en masse</em> after watching <i>Endgame</i></i>?</p>Should I name the article How Avengers: Endgame made crazy sense or Why Infinity War makes sense en masse after watching Endgame?
Except being a terrible example, it also looks somewhat messy because the point was to throw as much as possible together. In real life, there is not much nesting like this. And if there is, a rewrite is in order.
Editors and Markdown #
If you inspect the actual code in the example output, you will see that it was all em. That is because many WYSIWYG editors and Markdown don't seem to support anything but em and strong. Anything else gets converted. The editors usually have options to disable buttons, but it's more work to add custom ones or make flavours of Markdown. Ideally, all four tags should be available in any serious editor and language. I'm sure there are use cases for all of them.
On the other hand. While developers might know the difference, explaining to users why there are two buttons producing italics and no buttons for bold, is not something I see anyone wanting to deal with on a regular basis.