HTML: i vs em and b vs strong
I em very bold and strong
Countless web developers and designers alike seem to misunderstand the usage of certain HTML tags. While we can berate them all day long about their poor coding skills (and really why wouldn’t we?), it is much more charitable to help them!
First, HTML was brought up into it’s current form only after getting through several awkward years of strange semantics and usage logic. Just like any programming language, function and style usage change with the times (and the trends).
So, naturally, there are going to be those that do not quite grasp what changes and new additions really mean. We aim to fix them right now!
The difference between i and em
The <i> tag has been around on the internet as long as HTML has existed, and for good reasons. When a browser sees the <i> tag, it will almost always render the inner text with italics. This is expected.
Allowing web designers to use italics in their content made it very easy to add emphasis to text and be sure that everyone reading that page will see that extra level of formatting.
With advent of later versions of HTML standards, the <em> tag was eventually added in. Enter confusion.
Uhh.. just go straight?
Now designers and developers alike were looking at two different tags that seemingly did the same thing. There was a large amount of misunderstanding.
<i> – Strictly a presentational element.
If you want text to be italicized and not have any real semantic meaning, then wrap it in <i>I will be italicized and that’s all.</i>.
I think that the <i> tag will be deprecated eventually, as CSS has happily reduced presentational markup and removed it into a separate file. Of course, like most deprecated elements, browsers will still support them in order to cater to the vast amount of outdated web sites (like the ones that still use <frame>… uggh).
<em> – Strictly a structure element.
If you want text to be spoken with emphasis using a speech reader or search engine, then wrap it in <em>I may be italicized but I also denote emphasis (thus the “em”).</em>.
So in short, <i> say how a piece of text should be displayed, but the <em> show their level of importance.
The difference between b and strong
Just like the <i> tag, the <b> is a first generation presentational HTML tag.
<b> – Strictly a presentational element.
If you want text to be bold and not have any real semantic meaning, then wrap it in <b>I am bold. I take risks!</b>.
<strong> – Strictly a structure element.
If you want text to be spoken with strong emphasis using a speech reader, then wrap it in <strong>I am deeply emphasized! I may not be bold though.</strong>.
Also like the <i> tag, the presentational text bolding of <b> can be easily reproduced via CSS. What <b> may not do is notify a speech reader or search engine about the level of emphasis that the inner text holds.
And without search engines, people can't find your web site!
Bringing it all together
<strong> is similar to <em> in that it is one level above <em> in emphasizing text.
You have regular emphasis and then you have strong emphasis as it is stated in the guidelines. Now, who decided to make <em> italic and <strong> bold? Why weren’t both of them italic (with <strong> being bold italic) as they both refer to emphasis?
Well that’s plain and simple – the level of semantics for HTML is still a little misguided. It should be strongly emphasized that people who use <strong> are placing the greatest level of emphasis on text.
If you plan to merely change the presentation of text, be it for MLA/Chicago guidelines, brand styling, or display purposes only, then make sure to use CSS instead (with the <span> tag).
If you are trying to show the level of importance of text, use <em> or <strong> in their own relative respective places.
If you disagree, remember that you do have a logical reason to use all four tags rather than stick to one pair or the other. All four tags have valid uses (oh silly semantics…).