views:

621

answers:

6

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

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

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 &lt;b&gt; and <i> are not deprecated they are in HTML 5 specification

+7  A: 

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.

Mathias Bynens
Which is almost always the reason we use <b> and <i>.
ign
+1  A: 

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.

hurikhan77
@hurkhan, they're not deprecated, where are you getting this information from?
Andy E
@hurikhan77 The presentation layer (CSS) may be removed from the document, or changed by user, then your bold information will get lost. This is not a good advice. The question is about semantics, not the presentation.
takeshin
@takeshin: but "bold information" is actually part of a presentation layer, isn't it? It has nothing to do with the emphasis of a word, this is what "strong" and "em" are for... So still: No, you should not use "b" for semantical meaning.
hurikhan77
@hurikhan77 'Bold information' from your example is excactly as important as: `display: block; left: -999em;` or other rules. Eg. there was a big, bold sentence, saying 'Do not enter'. What is 'bold information then?' The default styles for elements which should be bold are bold (eg. h6). If you need to use inline bold text, you have to use additional tag. For adding styles to the part of the text, you need at least `<span>`, which will be invisible with no styles. Isn't `<b>` better in this case?
takeshin
@takeshin I don't see any problem with removing bold fonts if you remove the presentation layer as long as it does not remove semantical information. If it is of typographical value/relevance you shouldn't remove the presentation layer anyway, just replace it with one that fits the situation better. And I think this is why the usage of `<b>` is discouraged (which does not necessarily mean deprecated, depending on the html profile used). That also means that these tags cannot replace each other (strong vs. b) and are not interchangeable. BTW `<h6>` has semantical meaning, may it be bold or not.
hurikhan77
@hurrikhan77 I think we are arguing about the thinking about the information in the general, abstract way. E.g. storing the web page data in database, xml, json etc. This does not cover the *visual* 'boldness' at all. How do you add/remove 'boldness' then, not using CSS? Only by choosing specific tags.
takeshin
@take I would conclude this discussion with "just think before use" because we are probably discussing the same intentions from different views.
hurikhan77
@hurrikhan77 Agreed :) 'Think before use'.
takeshin
+1  A: 

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

peirix
But the specs clearly state that UAs are no longer forced to display the <b> tag boldened - probably because its usage was discouraged in HTML4. So if one expects a special formatting, he/she needs to style the <b> tag by CSS accordingly.
hurikhan77
+15  A: 

As others have mentioned using <strong>, <em>, <cite> etc. adds semantics, and this is important because you say something about why you want to emphasize something, and increases the readability of your html, because you know why its 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, mark it as <strong> for instance, if not use <b>.

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

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

Luhmann
can u make any mp3 clip and share a link of how screen reader read text in <strong> and <b>. or can u tell me how can i make
metal-gear-solid
see this article also http://www.paciellogroup.com/blog/?p=41
metal-gear-solid
@Luhmann Theoretically, the user agents, including screen readers should diffrentiate these tags. But it's just a theory. Not tested on SO's markup, but I think there will be no difference too.
takeshin
+1  A: 

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.

Pieter
+2  A: 

<b>, <i>, <tt> are strictly typographical.

By saying typographical, I don't mean visual. I mean semantics expressed by the look. They need additional context to have specific meaning (eg. definition, like:

  • text in italics were taken from ...

or relying on typographic convention, like that the text in bold are eye-catchers and the italics mean context change). In typographical conventions bolds and italics are some kind of parenthesis nesting.

(for example [this one has another context])

for example this one has another context

These tags are the port of traditional, printed typography, in which semantics is carried by the specific visual presentation.

As you pointed out, they are considered to be deprecated, but not in XHTML5. Why? I think, mostly that the web content is not only for the e-media. If you print web document, these tags may replace the syntax of some expressions used for example in TeX.

<strong> and <em> are strictly for semantics,

telling how the text should be read and emphasized.

So to recap, none of these tag means the same as other, so they not even should not be used, but may not be used interchangeably, nor substituted. In particular, blindly.

AFIR, Dreamweaver is not the model of the WYSIWYM editor. I have always considered it to be next generation of FrontPage thinking (ease of use and getting things done now, and forget about the future and scalability).

So I understand the surprise here, and your misconception feeling is right :)

takeshin