<b> vs. <strong> - <i> vs. <em>

The debate continues...

[pageoneresults]

Many of you know that I keep my nose buried at the W3C almost daily. While reading through the wealth of information available, you find little bits and pieces that really make it all gel. You also find links to various resources that lead you to other resources, etc.

While browsing through some of those resources, I came across a very heated debate concerning the use and misuse of presentation markup and structure markup. Mainly, the use of italics, bold, emphasis and strong emphasis.

After reading for hours through the various interpretations of the guidelines, I ended up at the WAI (Web Accessibility Initiative) which in my mind would be the authoritative resource on the use of these elements. I also spend a lot of time there too. ;)

How do you interpret the use of these elements?

Here is my perception based on the debates I've been reading...

• <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>.

• <b> - Strictly a presentational element.
  If you want text to be bold and not have any real semantic meaning, then wrap it in <b></b>.

• <em> - Strictly a structure element.
  If you want text to be spoken with emphasis using a speech reader, then wrap it in <em></em>.

• <strong> - Strictly a structure element.
  If you want text to be spoken with strong emphasis using a speech reader, then wrap it in <strong></strong>.

Now, doesn't it make sense that we would use all four elements in presenting both visual and structural design? Am I confused? :)

[edited by: pageoneresults at 8:11 pm (utc) on Dec. 27, 2004]

[kaled]

How are you going to do that with <i> and <b>?

You can style these tags too. If you wanted to you could make <b> display as italic and <i> as bold. It therefore follows that
1) style sheets for non-visual display of <i> and <b> can be designed without difficulty.
2) <i> and <b> can be treated as simply shorthand for <strong> and <emphasis>.

As I said before, there is no right and there is no wrong.

Kaled.

[Gusgsm]

firstreflex,

I like the way you tag things:

I use <em> for emphazised text, <cite> for titles of books, movies etc., <i> for foreign words and phrases, lawsuits (Brown v Board of Education) and names of ships, aircraft etc. (USS Enterprise).

But, please, would you explain me why did you choose <cite> for names (books, boats...)? Isn't that a big change of the tag role?

Aside, about the b-i-strong-em thing I believe there's only one reason to advocate the use of them: A future where the play some role together with new structural tags (which ones? I don't know). As this does not seem to be likely, I choose to side with those that think: Either irrelevant or both are to be used as synonims ;)

[TheDoctor]

why did you choose <cite> for names (books, boats...)?

This is what <cite> is for. It's a semantic tag, just as <strong> and <em> are. They all contain information about what is being marked up.

<i> and <b> - and the deprecated <u> - merely say something about how the characters should be displayed. They say nothing about meaning.

I don't really understand the title, since - as various people have pointed out - <i> and <b> are totally different animals to <strong> and <em>. They aren't alternatives, and I don't see why anyone should regard them as alternatives.

[tedster]

Well, from a purely semantic perspective (not a rendering perspective), what is the difference between saying a phrase is 'strong' and saying that it is 'emphasized'?

That has never seemed very clear to me, and perhaps it's the reason I've remained a Bozo about this whole issue.

[encyclo]

tedster, the problem is that when talking about semantics, HTML remains a very semantically-poor markup language. Even in strict form, there remains a large number of semantically meaningless elements, and there exists no way to semantically define groups of elements, make sections more or less important than others...

Arguing between

<b>

and

<strong>

purely in terms of semantics is like asking which is the better health food: poutine or cream fudge. :)

[pageoneresults]

what is the difference between saying a phrase is 'strong' and saying that it is 'emphasized'?

It took a little thinking for me to finally figure that one out. In this case, <strong> in an extension of <em> in that it is one level above <em> in emphasizing text. lol!

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?

[tedster]

I certainly agree with that, encyclo.

There's a new thread here today about a Usability and Acessibility Study [webmasterworld.com]. I found it quite illuminating relative to the issues a JAWS user must struggle with.

Given what I read there, I doubt that a JAWS user has any concern about these differences whatsoever. The whole issue ends up sounding like the medieval debate about how many angels can fit on the head of a pin.

My answers, by the way, are 43.7 angels, and cream fudge.

[TheDoctor]

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?

This is, of course, for the designer of the browser to decide - as with the default presentation of any tag. You can always overwrite the decision by the use of CSS.

Presentation is not the issue. Meaning is.

Although, I have to admit that I too am none to clear about the difference between saying something strongly and emphasising it. But it's always made sense to me when I've used one or the other tage in the past. I suspect that I'll start having problems from now on... :)

[johnnie]

I only use em, markedup with contextual CSS if necessary :) I think the other 3 can be thrown straight out of the window, since they all serve the same purpose: emphasis.

[TheDoctor]

Johnnie, would you mark up a foreign word with <em>? You imply - according to my reading of what you wrote - that you would. But why would you want to emphasise it?

<i> and <b> are nothing to do with emphasis. They have to do with presentation (and are effectively therefore, as someone already noted, a shorthand for a specific <span> style).

[kaled]

I've just come up with a jolly wheeze for SEO. Use <i> and <b> for visual effect and use <strong> for SEO whilst ensuring it has no visual effect. Just wrap all keywords on a page in <strong> tags.

I wonder how many purists would like to drive a dagger through my heart? :)

Kaled.

[TheDoctor]

kaled, I think that would be legiimate. Not playing fair, but definitely playing by the rules. :)

[Gusgsm]

why did you choose <cite> for names (books, boats...)?

This is what <cite> is for. It's a semantic tag, just as <strong> and <em> are. They all contain information about what is being marked up.

I beg to disagree, TheDoctor. The W3C says: "CITE: Contains a citation or a reference to other sources". That is why I asked the reason of that particular election. Not that I find it a bad trick but I don't think it can be recommended as a 'kosher' semantic usage.

A more proper tag would be something like 'title' or 'name' but both are used as attributes in other contexts, so... I think html is lacking is this aspect ;)

[valder]

Regarding the difference with em and strong.
Isn't it obvious? I'll give some examples of the way I understand the use of them:

I <em>may</em> not be able to do what you tell me.
I <strong>will not</strong> do what you tell me.

<em>Notice</em>: handle package with care.
<strong>Warning</strong>: package will self-destruct in 5 minutes.

How <strong>dare</strong> you call those people our <em>friends</em>?

Personally, I never use <i> or <b>, but use <span> instead. It makes more sense to me to place all styles in css, and italic and bold are simply styles.

[valder]

Until 5 minutes ago, I had the wrong impression of correct usage of cite, but I found this example of cite usage [lists.w3.org].

CITE is not for quotes or excerpts, but rather for titles of cited works, ala:

"It was the best of times; it was the worst of times,"
wrote Dickens in <cite>A Tale of Two Cities</cite>.

[Gusgsm]

Valder,

I read that message and now I understand it is dead right to use CITE in that sense ("I dunno about Q, but CITE is not for quotes or excerpts, but
rather for titles of cited works") I wish they'd add that explanation to the W3C pages. Otherwise they are a bit misleading.

Thanks, I'll be using CITE from now on ;)

[ergophobe]

If you wanted to you could make <b> display as italic and <i> as bold. It therefore follows that
1) style sheets for non-visual display of <i> and <b> can be designed without difficulty.

Actually, no, it doesn't. In typography, we use italics for
- foreign words
- titles of publications
- emphasis

If I want to transfer to another medium, it may not map the same way. In other words, I may raise and sharpen my voice for emphasis, but I would not do so every time I used a foreign word or mentioned the title of a book.

[kaled]

In other words, you have a logical reason to use all four tags rather than simple stick to one pair or the other. So, perhaps for different reasons, we agree - all four tags have valid uses.

For visual effect, I simply use <i> and <b> but I see no reason why all four tags should not be used on a single page.

Kaled.

[tedster]

Here's somethg I do that I know is a kludge.

The situation: I have an externally declared style for the <b> tag - it adds color to match the page's look, e.g. But in one small case on one page I need a standard bold rendering.

Rather than add a new class to my css file, I just use <strong> that one time.

Very lazy, I know.