homepage Welcome to WebmasterWorld Guest from
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

em and i -- strong and b
Don't yell at visually challenged visitors

 10:32 pm on Jan 25, 2004 (gmt 0)

As I understand it, the HTML tags <em> and <strong> appeared a few years ago in an effort to give some semantic clarity and help to speech readers. Page creation began shipping that used those tags as default for italic and bold text.

What a disaster. If page readers really read every <strong> tag in a strong voice, or really emphasize every <em> section on a page, then the poor user gets a page shouting at her or him on a regular basis.

I think this issue is really a no-brainer. If I am setting a bold or italic font for purposes of typography only, then I use <b> and <i>. If there's a word or phrase that I want to emphasize as I would in speaking, then - and only then - do I use <strong> or <em>.

Homesite allows the user to reset that default choice. Since most of my use is typographic, I reset the default a long time back. It's more accurate semantically, and it saves a few bytes as well.

This is becoming a pet peeve of mine as I work with different web teams and see the junky pages they turn out (and with such pride!)

[edited by: tedster at 2:29 am (utc) on Jan. 27, 2004]



 1:36 am on Jan 26, 2004 (gmt 0)

A good point tedster.

Personally I avoid using the <b> and <i> tags altogether as I like to keep the meaning of the html completely seperate from the styling and as the W3C says "their use is discouraged in favor of style sheets."


 4:24 am on Jan 26, 2004 (gmt 0)

Interesting topic. I too joined the <strong>/<em> movement a while back. Unfortunately as tedster states, <strong><em>I've been screaming emphatically at my audience now for over two years!</em></strong>

There are some interesting distinctions between each of the elements. The <strong> and <em> are classified as Idiomatic Elements [w3.org].

The <b> and <i> elements are classified as Typographic Elements [w3.org].

Hypertext Markup Language - 2.0 [w3.org]
September 22, 1995
T. Berners-Lee (1)
D. Connolly (1)
(1) MIT/W3C

I think its time to go on a mission and correct my evil ways. I'm thankful for Find and Replace features. ;)


 5:21 am on Jan 26, 2004 (gmt 0)

so web designers that have totally switched to creating pages with css and removing all these tags are now speaking to everyone in a boring monotonic voice?


 4:58 pm on Jan 26, 2004 (gmt 0)

tedster, I just wanted to drop you a quick thank you for starting this topic. I've spent about 2 hours reading the specs again on the use of these elements. I'll be the first to admit that I've been implementing these tags incorrectly. I never thought about the differences between <strong> and <b> in the case of page readers. Ack!

I've been replacing thousands of <strong> references on one site and will see how it fairs over the next month or so. With the removal of all that code bloat, I can only assume that there will be vast improvements, mainly in page sizes. I'm not sure what effect this will have, if any, when it comes to an indexing standpoint.

P.S. I did find a couple of instances where the <strong> element was applicable...

<strong>STOP!</strong> Are you sure you've read...


 5:50 pm on Jan 26, 2004 (gmt 0)

Using <strong> or <em> for typographic effect only is no different from using <p> simply to force line breaks, something we're not supposed to do in the times of CSS and the semantic web.

We use <cite> for publication or production names, and stylesheets for any other cases where italicized text is desirable. Similarly, we only use <strong> when we actually need strong emphasis.

Another point to address is that different page readers may render the effects of <strong> or <em> (or <b> or <i>) differently. As we learned after Fahrner image replacement, we should hold off on making sweeping changes to the markup unless a problem is truly evident. On one speech browser, <strong> doesn't necessarily mean louder, it might mean longer pauses between words. Another might interpret <b> and <strong> identically, making the exercise moot.


 6:04 pm on Jan 26, 2004 (gmt 0)

Interesting ..

I too no longer use <b> or <i>

Yes <b> and <i> are typographic.. I think that's why they're not necessary elements you can style the text with CSS instead if you want it to "look" different, a listener can't see your typography.

Granted it seems that <span class="bold">bold text</span> seems like a waste of time when <b> would've done in the past but I think/hope it's the future they're thinking of.

People were/are misusing the <b> and <i> elements, using it to style large chunks of text and in some instances I believe certain SE's actually gave credit to font-weight maybe still do?

So this attempt is possibly more than just to make the mark-up more "semantic". Could it possibly bring a correlation that screen readers and SE's could take a cue/standard from? If so.. I fully believe that <strong> and <em> should be used instead. For the correct purpose.

Let's face it certain "webmasters" have been known to put whole pages in bold text then style it via CSS to look normal, so it would seem like the best solution all around if Screenreaders and SE's alike adopted the standards and started ignoring <b> and <i>. It's the only way a "standard" can be reached that will suit the accessibility guidelines too. there are just too many sites/pages with backward compatibility for <b> and <i>, to enable proper accessibility adherence by trying to do it the other way around...

Well at least if SE's and Screenreaders did then you could if you wanted still use <b> and <i> for typography and you would no longer be shouting at people all the time and misguided SEO's will be doing no-one any harm either.

I'm not entirely sure we need 2 ways to make a screenreader emphasize text one element would've done when CSS is capable of formatting in either bold, italic or both if required visually. And aural stylesheets when fully implemented will have ways where you can choose the "pitch".

Meanwhile I use <em> (because it's shorter to type) which I style via CSS and only use it when I genuinely want to emphasise something and if I want bold or italic text for typography reasons I have a .bold {font-weight: bold} and .italic {font-style: italic;} in the stylesheet ready for use if required. It can be used in a multiple class scenario so can be "tagged" onto anything.

Just my 2p


 8:45 pm on Jan 26, 2004 (gmt 0)

I'm not entirely sure we need 2 ways to make a screenreader emphasize text one element would've done

Wasn't the idea that <strong> would be louder and <em> a higher pitch?

Not sure on that, but from what I've heard it's a moot point anyway, because it isn't practical for a screen reader to implement on today's web, given all that we've talked about here.


 10:19 pm on Jan 26, 2004 (gmt 0)

Wasn't the idea that <strong> would be louder and <em> a higher pitch?

You could be right there tedster, but being as how we seem to be stuck in "limbo land" at present you're right about this being a moot point.

It will depend what comes first screenreader catchup (good grief .. more "browsers" to test in!) or aural stylesheet compatibility... because "stress", "pitch" and "richness" is CSS's way but if they choose <strong> and <em> then we'll have to go with that first.



 2:19 am on Jan 27, 2004 (gmt 0)

Interesting post, tedster, thanks for the info.

Makes me want to get one of these browsers to test out the functionality of some websites, including my own.


 2:57 am on Jan 27, 2004 (gmt 0)


The nature of my site is such that it is of no interest to those who need to use non-visual browsers, so I tend not to think about the issues involved.

Thanks for making me think about them!

Purple Martin

 4:39 am on Jan 27, 2004 (gmt 0)

Great post, got me thinking too...

So <b> and <i> are typographical and <strong> and <em> are idiomatic. Should we be using typographical tags at all? Surely we should be using CSS for adjusting how the text looks - in other words, CSS for all typography?

I think I want to ditch <b> and <i> completely in favour of CSS for typography, and use <strong> and <em> sparingly for different kinds of emphasis.

BTW - as well as <em> and <cite>, don't forget <dfn> and <var>. These also look italic by default in many browsers.


 5:22 pm on Jan 27, 2004 (gmt 0)

Does anyone know how loud <strong> tends to be? How high/strident is <em>?

I have long used them sparingly and, I think, appropriately - <em> for emphasizing, <strong> for something important and <i> or its CSS equivalent for book titles or foreign phrases, etc. I try not to think of <em> and <strong> visually but semantically.

I have not, however, ever thought of them aurally except in the most abstract terms, not in terms of hurting someone's ears or embarrassing that poor visually impaired man at the public internet cafe who just visited MY VIAGRA SITE ;-).

So does anyone know, how loud are these?


 12:58 pm on Jan 28, 2004 (gmt 0)

ISTM these substitutions took place 'cos the w3c advocate separating structure from formatting, which is not always entirely possible.

Bold and italic are clearly formatting-related so according to the w3c's guiding doctrine they shouldn't be in the source (x)html. But as Suz sez, adding spans is a PITA (and is equivalent to putting formatting info in the structural source anyway - hence the w3c's desire to deprecate span).

So the w3c redefined the bold and italic tags to use formatting-unrelated, "more semantic" words even though to all intents and purposes they are used in exactly the same way (stick formatted spans in the text) and have exactly the same meaning as <b> and <i> (i.e. no meaning, other than visual presentation).

AFAICR Jaws with IE does not treat bold and italic text differently to normal text however it is marked-up (can't confirm at the moment).

I use <b> and <i>. Why waste bytes? ;)

<Edited for typo>

[edited by: mattur at 1:42 pm (utc) on Jan. 28, 2004]


 1:29 pm on Jan 28, 2004 (gmt 0)

mattur said:
Suz sez, adding spans is a PITA...(stick formatted spans in the text)

Yeah, but how often do you actually do this? When do you make something bold but not want it to be emphasised when read?

I can't think of any reason to do this with a short phrase or word.
Anyone care to supply an example?


 1:37 pm on Jan 28, 2004 (gmt 0)

How about a product name?


 1:58 pm on Jan 28, 2004 (gmt 0)

Okay.. so you have a product and a description. You want the product name to be prominent, but doesn't that mean if you read it out you would want some emphasis put on the name?

Also wouldn't an <h> tag be better for a product name that was followed by a decsription or whatever?


 6:02 pm on Jan 29, 2004 (gmt 0)

In this post, CMS = Chicago Manual of Style

When do you make something bold but not want it to be emphasised when read?

- dynamics in music: "Symbols for these terms are in lowercase boldface italics with no periods: p, mf." (CMS 7.75)

Let's ask a slightly different question:

When do you make something italic but not want it to be emphasised when read?

- book titles
- foreign words and phrase (CMS 7.51-55)
- enzyme names (CMS 8.141)
- unabbreviated dynamics in music (CMS 7.75)
- gene names (CMS 8.140)
- genus and species (CMS 8.128)
- legal cases (CMS 8.88)
- rhyme schemes (CMS 7.69)

and others :-)


 1:41 am on Jan 30, 2004 (gmt 0)

Thanks, tedster -- I was just about to ask about this very topic.

I usually write web pages to facilitate several levels of (visual) scanning, as outlined in Nathan Wallace's classic article Web Writing
for Many Interest Levels
[e-gineer.com]. and Jakob Neilsen's How Users Read on the Web [useit.com]. My page title sums up the content, the subheads outline the topic in a bit more depth, and I highlight important phrases in the text.

Tonight I started wondering whether I should keep using <b> for highlighting important phrases, or switch to <em>. That of course depends on whether screen readers facilitate auditory scanning in the same way. Sounds like not -- anyone know for sure?

BTW, what is a PITA?


 1:50 am on Jan 30, 2004 (gmt 0)

BTW, what is a PITA?

Pain In The Arse. ;)

P.S. I just used <b></b> to produce the effect above. Am I misusing the <b> tag?

Purple Martin

 3:32 am on Jan 30, 2004 (gmt 0)

Pain In The Arse. ;)

P.S. I just used <b></b> to produce the effect above. Am I misusing the <b> tag?

I would say yes you are misusing it. The difference in the initial letters is emphasis, not just typography.

Jeez I really am turning into a pedant =:-0


 12:33 pm on Jan 30, 2004 (gmt 0)

CSS2 has a number of properties to be used specifically for aural browsers. Amongst others: pitch, stress, volume. Maybe they are to be preferred over <strong> and <em>?

<span style="volume: 100">very loud</span>

Aural style sheets [w3.org].


 12:36 pm on Jan 30, 2004 (gmt 0)

- enzyme names (CMS 8.141)
- unabbreviated dynamics in music (CMS 7.75)
- gene names (CMS 8.140)
- genus and species (CMS 8.128)

Yeah, so like I said, fairly unusual!


 5:02 pm on Jan 30, 2004 (gmt 0)

When do you make something italic but not want it to be emphasised when read?

- book titles

Use the <cite> tag for titles

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