<b> and <i>have companions, including <strong>, <em> and <cite>. Together, these tags make the meaning context of text clearer:
<b> is for drawing attention to text without giving it any additional importance. It’s used when we want to draw attention to something without changing the inflection of the text when it is read by a screen reader or without adding any additional weight or meaning to the content for search engines.
<strong> is a lot like <b> but signals the importance of something. It’s the same as changing the inflection of your voice when adding emphasis on a certain word.
<i> italicizes text without given it any additional meaning or emphasis. It’s perfect for writing out something that is normally italicized, like the scientific name of an animal.
<em> is like <i> in that it italicizes text, but it provides adds additional emphasis (hence the tag name) without adding more importance in context. (‘I’m sure I didn’t forget to feed the cat’).
<cite> is what we use to refer to the title of a creative work, say a movie like The Silence of the Lambs. This way, text is styled but doesn’t affect the way the sentence would be read aloud.
In general, the rule is that <b> and <i> are to be used only as a last resort if you can’t find anything more appropriate for your needs.
^ that is an `aside` but you can't tell... I tried `cite` but it was not output.
So, this editor and the one in CP, both indicate bold as B and italic as I in the toolbar, yet they use strong and em in the output HTML, and the general rule is that b and i are last resort.
I actually have a site that has a lot of botanical names, and so I should be using i instead of em, but the editor doesn’t cooperate.
I think you have to take that up with TinyMCE directly, see Full featured examples | Docs | TinyMCE
It uses B and I button labels, which on hover will state bold and italic (same as CP editor does), instead of the semantically correct things you mention above (being B, I, Strong and Em).
I think both, this forum’s and CP’s editors are based on TinyMCE thus just using what they use.
Worth to note that the editor does use the correct markup, just the button labels and hover titles are wrong. (By correct I mean it uses em and strong, instead of the last resort b and i)
Adding new buttons is perfectly possible and the solution for such use cases, but I think changing the existing ones could confuse peoples who are used to the existing ones since a few years from a couple forums (basically all inputs using TinyMCE will have that B and I as far I know, it is even commonly used as the “name” of those things).
I’ve rarely heard someone calling the “bold” an actual “strong” text, at least not in worldly common people’s discussions. Everyone knows what bold means, strong however is less known. With Italic and EM(phasized) it is similar. Thus I could suspect this was done on purpose.
This is why I never use Tiny, and always just write in HTML. I need to use the <cite> tag a lot in legal writing. I also need both <em> for emphasis and <i> for terms in a foreign language. (Law has many French and some Latin words).
So far as I am aware, pretty much every rich text editor makes the same decisions about the b and i buttons as Tiny. But you can override them, in some cases, with a bit of code. Not sure if you can do that with Tiny. But that still leaves the problem of having one i button and wanting three different outputs, according to the context. So I stick to HTML.
I’ve also never seen an authoritative statement about whether legal case names should be enclosed within <cite> or <i> tags. I use <i> at the moment because it’s really just a convention for visual presentation, but I’m not 100% sure that’s right.
In short, how i’ve “learned” it: I/b were the intial tags around, when the web went HTML, but if you want to head down the semantic web lane, em / strong are “the thing”. So I only use these, and i is only ever in use for placeholders, eg. font icons etc.