Is it ok to use <strong> in place of <b> blindly?

Viewed 15187

Note: I know <b> is presentational and <span style="font-weight:bold> is a better way, and <strong> and <em> are for emphasis but my question is not regarding this.


Should we convert every <b> to <strong> blindly? Many people do this, they think <b> is not good as per web standards so they convert every <b> to <strong> upon site redesign, content re-population, new site design and people suggest this to others also.


Dreamweaver has also given the option to convert all <b> and <i> to <strong> and <em> on code paste in design view and when we use B and I Which people use blindly.

alt text http://shup.com/Shup/280420/1101118332-My-Desktop.png

And Dreamweaver (if above option is checked) and many online WYSIWYG editor give output in <strong> and <em> while button shows B and I.

alt text http://shup.com/Shup/280425/1101118921-My-Desktop.png

In my opinion it's creating a misconception about <strong> and <b>


When we get content from a client we don't know where the client wants to give emphasize and where he just wants to use bold text for presentation purposes. What should we do in this circumstance? No one has the time to give to decide for each instance (us and the client), whether it should be <b> or <strong>, <i> or <em>

What are the pros and cons to convert every <b> and <i> into <strong> and <em> blindly if we are saying our site is accessible?


Update: remember <b> and <i> are not deprecated they are in HTML 5 specification

9 Answers

As others have mentioned, using <strong>, <em>, <cite> etc. adds semantics. This is important because you say something about why you want to emphasize something and increase the readability of your html, because you know why it's in bold.

Furthermore, screen readers use the strong tags to make an audible difference when reading it aloud.

Maybe you could think about the audio represenation as a guide. If you would want a difference when read aloud, for instance, mark it as <strong>. If not, use <b>.

Then there is the issue of rendering: I don't actually know if all browsers will render a <strong> as bold and if it will stay that way.

So in short: <strong>No</strong>.

Is it ok to use <strong> in place of <b> blindly?

No.

To quote Anne van Kesteren (source):

Let me give some contradictory advice. Please do replace em with i and strong with b. The resulting markup is likely more accurate. Especially with WYSIWYG software it is extremely unlikely they will be used correctly, but also because the notion spread that they are interchangeable with the sole difference being that strong and em are semantic a lot of misuse happened. When in doubt, use i and b.

And he’s right, of course. strong and b are not the same. em and i are not the same. Only use strong / em if you want to add semantical emphasis to text.

If you just want to use bold text, make it bold via css. If the "bold" font weight has no semantical meaning, you should not use <strong> or <em> for it. However, you shouldn't use <b> or <i> either because these are non-semantic (in fact they are font-style tags) and their use is thus discouraged if not even deprecated.

<b> and <strong> are not necessarily the same. <strong> as you suggested are for higher emphasis, while <b> are for styling purposes only. So you should not switch them blindly.

Some people will say that the <b> tag is being deprecated, but it's not. It's still alive and kicking. However; it is not very semantic, as you're saying, so it might be a better option to use a <span> and style it.

As others have said there's a semantic difference between strong/b and i/em. Especially they are used by screenreaders for visually impaired people visiting your website. For them it makes a huge difference if you just make some text bold-face, or if you want to add some kind of EMphasis to what you're saying on your website. So be sure to carefully consider making something bold using B or STRONG. The same goes for EM and I.

To understand the difference between the <b> - <strong> and <i> - <em> tags, you need to understand that the tag is used to simply highlight text, while <strong> defines the meaning of the highlighted text. Likewise with the <i> and <em> tags: an example of the difference is the OS settings used by the visually impaired. When the reading of texts with the "speech" is enabled, the words will be highlighted by the intonation of the <strong> and <em> tags.

Related