homepage Welcome to WebmasterWorld Guest from 54.204.127.59
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 49 message thread spans 2 pages: 49 ( [1] 2 > >     
<b> vs. <strong> - <i> vs. <em>
The debate continues...
pageoneresults




msg:588468
 7:47 pm on Dec 27, 2004 (gmt 0)

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]

 

Robino




msg:588469
 8:02 pm on Dec 27, 2004 (gmt 0)


Guess which ones I use when coding by hand?


Robin_reala




msg:588470
 8:03 pm on Dec 27, 2004 (gmt 0)

strong/em? It's what I use :)

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

As I try to seperate presentation from semantics as best as possible I use font-weight:bold or font-style:italic on the container element if that effect is meant purely for presentation. If it's meant to encapsulate a semantic meaning I'll use strong and em.

Small Website Guy




msg:588471
 8:17 pm on Dec 27, 2004 (gmt 0)

"i" and "b" are a lot easier to type than "em" and "strong". And "i" and "b" are also a lot more self-explanatory.

"i" and "b" win!

pageoneresults




msg:588472
 8:18 pm on Dec 27, 2004 (gmt 0)

Guess which ones I use when coding by hand?

Low blow! Yes, I will agree that there is a character shortage in using <b> vs. <strong>. But, it is not a valid argument for using one over the other. ;)

As I try to seperate presentation from semantics as best as possible I use font-weight:bold or font-style:italic on the container element if that effect is meant purely for presentation.

I too make use of this method. Not as much as I probably should, but I do.

What about inline elements? Are you wrapping those in a <span class=""></span> for visual presentation?

Couldn't you also just use <b> and <i> based on their true presentation meaning of being bold or italic?

kiwibrit




msg:588473
 8:27 pm on Dec 27, 2004 (gmt 0)

Almost every font I use on a site is in a style sheet. Otherwise, I usually am using Dreamweaver, set to use <strong> and <em> automatically. But when I am coding by hand, I use <b> and <i>. I can do lazy.

Robino




msg:588474
 8:30 pm on Dec 27, 2004 (gmt 0)

^ Exactly what I do.

pageoneresults




msg:588475
 8:41 pm on Dec 27, 2004 (gmt 0)

Otherwise, I usually am using Dreamweaver, set to use <strong> and <em> automatically.

I have to wonder if we as users of WYSIWYG editors have it all wrong. From a semantic standpoint, you would not use <em> and <strong> that frequently unless of course you want to shout at someone while they are viewing the entire page. ;)

Imagine a screen reader running through your page. What would it sound like?

encyclo




msg:588476
 10:03 pm on Dec 27, 2004 (gmt 0)

I use all four, but each in different circumstances. ;) I use
<em> and <strong> when the semantics demand it, otherwise <b> and <i> do the job nicely.

One good thing about <b> and <i> are that they semantically meaningless, but have a presentational influence even in non-CSS-aware user agents. This means that they are often a great alternative to the competely meaningless <span>. For example, take the following paragraph:

She has a certain je ne sais quoi, don't you think?

You could write this as follows:

<p>She has a certain <span lang="fr">je ne sais quoi</span>, don't you think?</p>

However, to visually distinguish the different language, you would need to add a class name (due to browser support issues, but CSS 3 will fix this). However, if you do this:

<p>She has a certain [b]<i lang="fr">[/b]je ne sais quoi[b]</i>[/b], don't you think?</p>

The style is taken care of even if CSS is absent. If you don't like the italics, you can simply over-ride it in the stylesheet, and you're still saving 6 bytes at least in any case!

It's not just for distinguishing language either - in many cases, when using a <span>, you can often use <b> or <i> instead.

mattur




msg:588477
 12:33 pm on Dec 28, 2004 (gmt 0)

AIUI screen readers do not read these tags differently. They ignore them completely.

Marking something up as bold or strong/italic or emphasis means nothing semantically, and has no effect whatsoever on accessibility.

Use what you want. Not one single person will be affected by your decision, either way.

pageoneresults




msg:588478
 4:58 pm on Dec 29, 2004 (gmt 0)

Marking something up as bold or strong/italic or emphasis means nothing semantically, and has no effect whatsoever on accessibility.

Interesting comment. Can you confirm that? I mean, everything I've researched to date states that screen readers do treat these things differently. Please, do tell more...

ergophobe




msg:588479
 9:29 pm on Dec 29, 2004 (gmt 0)


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

Yes and no. On a theoretical level, I would say no. HTML should not handle presentation and I mostly try to write code that way. So, in order of preference, least desirable to most:

1.
This is a <i>book title</i> in italics

2.

This is a <span class="i">book title</i> in italics
span.i {font-style: italic;}

3.
This is a <cite class="book_title">book title</i> in italics
cite.book_title {font-style: italic;}

#3 is far and away the best, because if I were to create separate style sheets for separate media (browsers, print, screen readers, mobile phones), the "title" class would always make sense, whereas "italic" would only make sense in two of the four, perhaps three depending on the mobile phone's capabilities.

#2 is hardly an improvement over #1.

#3 is a huge improvement over #2.

As for the accessibility issue, that's debatable. I think the OP meant that in the worst case, the italics is simply not rendered and therefore can't be considered an accessibility problem. In fact, though, it is. If the italics has a semantic meaning (which it does, as I'm using it for a book title in this case), it's not clear that the cue to the screen reader is as it should be. So whereas the person viewing the page in a browser will know that it is a citation, the person on the screen reader may not.

jawfish




msg:588480
 11:10 pm on Dec 30, 2004 (gmt 0)

803b compliancy states that the <strong> and <em> tag are the acceptable tags. Always remember, the <b> and <i> tags were introduced by the browsers (IE & Netscape), not by the W3C. I use these and know I have my bases covered. Even if one reader program ignores the <b> and the <i>, I have not wasted my time.

photon




msg:588481
 5:55 pm on Jan 4, 2005 (gmt 0)

I've always coded by hand, and I've always (well, within the past two years) used CSS with XHTML 1.0 Strict. And I've used <strong>s and <em>s almost exclusively. However, I've begun to think that in a strict sense I'm not using those in the proper way.

So I've started using <b>s and <i>s--if I'm not going to do it the proper way, I'm at least going to do it the lazy* way.

* "Efficiency is merely intelligent laziness."

mattur




msg:588482
 2:30 pm on Jan 6, 2005 (gmt 0)

pageoneresults, most things I've read clearly state that screen readers treat <strong> and <em> differently to <b> and <i>, too.

However, I've tested all the popular screen readers and audio browsers and they don't. I've yet to hear of any reader or browser that treats them differently (Emacspeak perhaps?).

To all intents and purposes, <strong> and <em> are simply aliases for <b> and <i>. They're "structural" tags used as direct replacements for presentational tags.

Ironically, there are accessibility benefits to having the togglable ability to announce bold and italic font styles in screen readers. And screen readers can skip by bold text to scan the document content, similar to sighted users visually scanning a page. Note that this does not require any shouting, nor any distinction between what is seen/read and what is heard/read.

<b> and <i> tags appeared sometime in the early days of HTML "1" (1993 or earlier - they certainly weren't introduced by Netscape or Microsoft). <strong> and <em> were approved in HTML 2 (rfc1866) in September 1995 (they were around earlier - Mosaic added support in 1994).

WCAG 2.0 is set to keep this ten-year debate going for some inexplicable reason - see HTML Techniques for WCAG 2.0 point 5.1 - but I'm reasonably sure there isn't actually a debate here.

firstreflex




msg:588483
 8:52 pm on Jan 6, 2005 (gmt 0)

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

kaled




msg:588484
 10:51 am on Jan 7, 2005 (gmt 0)

I use style sheets to adjust the result of using <i> and <b>. You may say "you're crazy" but suppose I have a bold paragraph and want to emphasise one word still further, I can do so by making it red. For a single instance, this could be done with a <span>, but CSS, for me, is all about making global changes to visuals using a single central file, so I do this by redefining the appearance of <b>

Why is this relevant? Well, I presume that style sheets for screen readers could be defined to treat <b> as <strong> etc, therefore the whole argument is nonsense. There is no right and there is no wrong - although, I suppose, that people who believe there is a wrong are themselves wrong. There's a nice irony to that.

Kaled.

ronin




msg:588485
 1:40 pm on Jan 8, 2005 (gmt 0)

Well, I suppose everyone has their own way of marking up, but if Kaled's assertion is correct, then I'm definitely wrong >;->

I try to mark up elements in documents according to the role they play in the document, and stay away from visual instructions... I would go as far as to say that using markup to give visual instructions for elements is going beyond the boundaries of what html is meant to be used for.

So, if I have a short quote in the middle of the paragraph which I wish to italicise I will use <q> </q> and style q as:

q {font-style:italic;}

It strikes me that an element can (arguably) have a role as emphasized information or strongly emphasized information, but it cannot have a bold role or an italic role... those two instructions are simply descriptions of the visual appearance of the element, so they might as well go in the style sheet.

The result of this position is that I very occasionally use <strong> and <em> but mostly use font-style:italic; and font-weight:bold;

I never use <i> and <b> and would (in 2005, at any rate) argue against their use as much as I would argue against using <font size="-2"> or <body bgcolor="#FFAA00">.

mattur




msg:588486
 6:58 pm on Jan 8, 2005 (gmt 0)

I never use <i> and <b> and would (in 2005, at any rate) argue against their use as much as I would argue against using <font size="-2"> or <body bgcolor="#FFAA00">.

Moving font sizes and background colours into CSS reduces page size: a clear benefit. Replacing <b> and <i> with <strong> and <em> doesn't make your pages more accessible, more structural or more compatible with the Semantic Web. The only effect is an increase in page size: a clear drawback.

firstreflex




msg:588487
 2:52 pm on Jan 10, 2005 (gmt 0)

I look at <i> as just shorthand for <span class="italic">, IMO it still has its uses. I don't see how it can be viewed the same as using <font size="-2">.

ronin




msg:588488
 5:20 pm on Jan 11, 2005 (gmt 0)

It is the same - it's a visual instruction.

<span class="italic"> is the same as <span class="red">...

What happens if you style the first paragraph of each article using an italic font and then one day you decide to change it to a small bold font?

If you called your class "firstpara" you wouldn't have much of a problem. But a class called "italic" which is styled as small and bold doesn't make too much sense.

I think there's a substantial argument for getting rid of <b>, <strong>, <i> and <em>.

Reid




msg:588489
 9:44 am on Jan 17, 2005 (gmt 0)

I'll throw a curveball into this argument.
The developers of speechreaders etc would probably love it if everyone used these four elements properly and their beta likely did render them differently.
But during beta testing they probably ran into too many problems with tags improperly used that they decided to render them the same to make their product more useful.

firstreflex




msg:588490
 2:55 pm on Jan 17, 2005 (gmt 0)

It is the same - it's a visual instruction.
<span class="italic"> is the same as <span class="red">...
What happens if you style the first paragraph of each article using an italic font and then one day you decide to change it to a small bold font?
If you called your class "firstpara" you wouldn't have much of a problem. But a class called "italic" which is styled as small and bold doesn't make too much sense.

That is not what I'm talking about. Many people use <em> for all italics, but there are times when any style manual will tell you you should use italics (I gave examples in my 1st post) when <em> is most definitely wrong and it is far better to use <i>. Now you can argue it is better to use <span class="foreign phrase"> or whatever but for me <i> is just fine in these cases.

mattur




msg:588491
 6:00 pm on Jan 17, 2005 (gmt 0)

The developers of speechreaders etc would probably love it if everyone used these four elements properly and their beta likely did render them differently.

Doubtful, imho. It would be a support nightmare, generating support calls to developers asking why their screen reader doesn't find some piece of bold text when searching for bold text (because it's marked up as bold not strong... or vice versa). Braille displays get along just fine using only bold and italic. As does every other field of human endeavour... ;)

We (or, perhaps more accurately, the w3c) really should not be trying to force meaningless syntax babble on people with visual impairments who afaik never asked for any of this in the first place. Any person going through the process of losing their sight has more than enough to cope with already.

Michael Weir




msg:588492
 6:43 pm on Jan 17, 2005 (gmt 0)

my brain hurts after reading this, but it's something I've often wondered.

I use <strong> at work and <b> at home.

Why?

because I have different versions of dreamweaver at home and work. One, by default, uses the <b> tag when I go to bold text in the WYSIWYG editor and the other, by default, uses the <strong> tag in the same scenario.

*shrug*

pageoneresults




msg:588493
 6:52 pm on Jan 17, 2005 (gmt 0)

One, by default, uses the <b> tag when I go to bold text in the WYSIWYG editor and the other, by default, uses the <strong> tag in the same scenario.

lol, that made my day! That has to be one of the top reasons why people use both. ;)

tedster




msg:588494
 7:40 pm on Jan 17, 2005 (gmt 0)

I feel like a total bozo here. The advent of <strong> tags felt like a bothersome fly to me. I just swatted it and stayed with <b>, changing the default in Homesite whenever I updated my software.

Why? I liked the shorter tag and I thought the the whole <strong> and <em> thing was a tempest in a teapot - worse than many "politically correct" name changes in the popular press, some of which do make practical sense.

If there is ever a coherent and uniform address to the situation and definitive support from screen reader user agents, then I will probably pay attention. For now, I just save small bits of bandwidth.

bumpaw




msg:588495
 8:16 pm on Jan 17, 2005 (gmt 0)

because I have different versions of dreamweaver at home and work. One, by default, uses the <b> tag when I go to bold text in the WYSIWYG editor and the other, by default, uses the <strong> tag in the same scenario.

There a option for this. Edit/Preferences/General... Check or uncheck depending on desire. :)

Horse Feathers




msg:588496
 12:07 am on Jan 18, 2005 (gmt 0)

I self-study in typography (will be doing so formally this April when I return to school :]), and for me, it makes sense to use <i> when I want itailics and <b> when I want bold. The words "emphasis" and "strong emphasis" can mean anything. "Italics" is italics and "bold" is bold, and fonts are called so to suit those styles i.e., there isn't a character set called "Times New Roman Emphasis".

But again, personal preference. :]

Although, since this was mentioned earlier,...

803b compliancy states that the <strong> and <em> tag are the acceptable tags. Always remember, the <b> and <i> tags were introduced by the browsers (IE & Netscape), not by the W3C.

I'm curious if there are browsers that don't recognize <i> and <b>.

ronin




msg:588497
 2:28 pm on Jan 18, 2005 (gmt 0)

The words "emphasis" and "strong emphasis" can mean anything. "Italics" is italics and "bold" is bold

That's the whole point though, isn't it?
All <i> and <b> can ever mean are two dimensional visual instructions. Which is not very much use to anyone except human readers with sight. It's not much use to computers and it's not much use to non-visual user agents.

How does a speech synthesizer say a word with <i>talics? (With difficulty, I imagine... I don't know humans who can do it either). )If you want to say a word with <em>phasis, however, that's fairly straightforward.

Look at another scenario... what happens if you want the <strong>ly emphasised phrases in your article to be in italics?

It makes sense to style strong with:

strong {font-weight:normal; font-style:italic;}

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

Dominant browsers have traditionally displayed <strong>ly emphasised elements as bold and <em>phasised elements as italic, but that's nothing more than a default pattern.

This 49 message thread spans 2 pages: 49 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved