HTML: i vs em and b vs strong

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.

confusion of directions

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.

search engine emphasis

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…).

Related Posts
  • badmash

    I just signed up to your blogs rss feed. Will you post more on this subject?

  • Counter strike

    I’d like to say that you always offer valid information and I have been an fascinated reader of your site for quite some time. I wanted to say thankyou really :) for all the good work you do!

  • Corina Beyett

    Hey how are you doing? I just wanted to stop by and say that it’s been a pleasure reading your blog. I have bookmarked your website so that I can come back & read more in the future as well. plz do keep up the quality writing

  • Fred Kurtelmann

    Basically found your web web page by way of google and i consider this may be a disgrace that you are not ranked higher because of the reality that which is a wonderful publish. To swap this i determined to avoid wasting your internet web site to my Rss reader and I will try to point out you in 1 of my posts since you really deserv additional readers when publishing content material content of this quality.

  • ode

    Thank you for sharing such an incredible article.

  • amer

    Thanks for this! I’ve been searching all over the web for a good breakdown of this.

  • Pingback: What makes a good web design? And how did we start? | electro kami()