Deprecated code: <b> vs style="font-weight:bold;"

Question

I've always used <b> tag to bold something, because that is the way I was taught to do it a long time ago. But now my IDE always informs me that <b> is deprecated and to use css style. Assuming by that they want me to use <div style="font-weight:bold;">Bold Text</div>. How vital is this message that my IDE is giving me? Should I go back and change all my<b> to style?

Below is an example of both situations. Could someone explain the difference's between both and why <b> is deprecated now?

<b>Bold Text</b>

Vs.

<div style="font-weight:bold;">Bold Text</div>

Would <b> be better because if someone has css turned off on the browser, it would still be show correctly?

Answer 1

The correct question is: "What markup best describes my content?"

Let's start with the <b> tag (which is not deprecated):

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

...

You should not use b and i tags if there is a more descriptive and relevant tag available. If you do use them, it is usually better to add class attributes that describe the intended meaning of the markup, so that you can distinguish one use from another.

...

It may help to think of b or i elements as essentially a span element with an automatic fallback styling. Just like a span element, these elements usually benefit from class names if they are to be useful.

http://www.w3.org/International/questions/qa-b-and-i-tags

By comparison, <strong> has a more specific purpose:

The strong element represents a span of text with strong importance.

http://www.w3.org/TR/html-markup/strong.html

For example:

<p><strong>Warning.</strong> Here be dragons.</p>

_{Here we emphasize the word "warning" to stress its importance.}

But not:

<p><strong>Item 1:</strong> Foo, bar, and baz.</p>

_{"Item 1" isn't meant to be stressed, so <strong> is the wrong tag. Furthermore, it's possible that the whole structure could be better represented.}

If the meaning of the text has strong importance, <strong> is appropriate (just like this line).

Perhaps you just want a thicker font for style purposes and the text has no particular meaning. In that case, neither <strong> nor <b> may be appropriate.

<span class="product-name">Hello World</span>

.product-name { font-weight: bold; }

---

In all cases:

• Use the markup which describes the content.
• Do not use inline styles (use an external stylesheet).
• Do not name styles based on their visual representation (e.g. naming a style "bold" is a poor choice)

Would <b> be better because if someone has css turned off on the browser, it would still be show correctly?

No. Use the correct markup for the job. It's fairly unusual for someone using the visual representation of your site to willingly disable the stylesheet, but non-visual consumers care primarily about the structure of your document. A "non-visual consumer" could be a search engine parsing your content or a screen reader application.

Additional Reading:

• http://www.w3.org/TR/html51/text-level-semantics.html#the-strong-element
• http://www.w3.org/TR/html51/text-level-semantics.html#the-b-element

Answer 2

It's not "vital" if the code still works. Though it would conform to current standards which will give the code a longer future.

The difference is that using CSS separates your styling from your content. <b> is a style, nothing more. And it tightly couples that markup to that style. The separation allows you to emphasize the markup in other ways instead of always using a bold font.

Would be better because if someone has css turned off on the browser, it would still be show correctly?

No, because if the user wants to disable styling then your <b> tag undermines that, because it's mixing styling with content.

Answer 3

You should be using <strong> in place of <b>. You could use styles (text-weight: bold in a separate sheet) if a particular group of text was always going to be bold, and you didn't (or couldn't) want to use <strong> for whatever reason. But I would only go that route if you already were applying other styles to that same element.