Believe it or not, the <b>, <i>, <strong>, and <em> tags have all been a part of the HTML spec since nearly the beginning. All four of these tags were introduced in HTML 2. However, for a very long time, the community was focused on the <b> and <i> tags only. It is only recently that the <strong> and <em> tags have become “popular”.
Over time, the <strong> and <em> tags gained a reputation of being pretty much the same as the <b> and <i> tags. After all, the default browser behavior of <strong> and <b> are both the same, as is that of <em> and <i>.
Therefore, systems formed opinions on the matter. CMS editors will insert <strong> and <em> tags into your content when you click on the bold and italic button in the WYSIWYG editor. Some accessibility monitors even go so far as to say that <strong> and <em> are the “correct” tags to use in situations where you want to bold or italicize something. They say that <b> and <i> should never be used.
However, this is wrong. All four of these tags have different semantic meanings and can validly be used, depending on what you are trying to accomplish.
Let’s start with the <strong> and <b> tags. The <strong> tag should be used for phrases that you want to emphasize. For example:
1
<p>I <strong>do not</strong> want to see a mess in my kitchen!</p>
In contrast, the <b> tag should be used for phrases that do not require emphasis, but should visually be bold. For example:
1
<p>I like <b>cookies</b> and <b>cakes</b>, but not pies.</p>
There are similar differences between the <em> and <i> tags. The <em> tag should be used for phrases that you want to emphasize. For example:
1
<p>I am <em>extremely</em> excited about the Superbowl.</p>
In contrast, the <i> tag should be used for phrases that do not require emphasis, but should be visually italicized. The <i> tag is often used when referencing book titles or foreign words. For example:
1
<p>I think <i>Make Way For Ducklings</i> is a classic piece of literature that all children should read.</p>
In short, pay attention to your content. How should it look? How would it sound if you were to read it out loud? Should there be an emphasis on a particular word to drive your point? The answers to these questions will guide which tag to use to support your content.
References: