Welcome to WebmasterWorld Guest from 54.211.86.24

Forum Moderators: incrediBILL

em and i -- strong and b

Don't yell at visually challenged visitors

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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
Suzy
[edit]typos[/edit]

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

Suzy

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

WebmasterWorld Administrator ewhisper is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



Tedster,

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!

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

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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?

This 24 message thread spans 2 pages: 24
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month