10

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?

Arian Faurtosh
  • 17,987
  • 21
  • 77
  • 115
  • 1
    Pretty sure if someone has CSS turned off - as you suggested - they can't navigate the internet. – Josh Crozier Sep 23 '13 at 17:44
  • 7
    For the more general question please see http://www.w3.org/International/questions/qa-b-and-i-tags. To answer your specific question, who will be viewing your code? In a browser? – dash Sep 23 '13 at 17:45
  • 2
    @JoshC not true... I just turned off style and I was still able to navigate Stack Overflow. – Arian Faurtosh Sep 23 '13 at 17:46
  • If someone does not want styles, then he does not want the "b" tag. But if you want to use it, use – Daniel Sep 23 '13 at 17:46
  • @JoshC No, they just can't navigate poorly designed websites. I am surprised the IDE doesn't recommend ``, though, perhaps with a CSS rule to ensure that it actually renders as bold. – Aaron Miller Sep 23 '13 at 17:46
  • @dash Thanks for the link, it was a great read. – Arian Faurtosh Sep 23 '13 at 17:55
  • @Arian and Aaron Miller - Try navigating Google with your CSS turned off. The point of my original comment was that you cannot functionally use a website with it off - thus you are unable to navigate the internet to its full capability or intended use. Other than bots, nobody that I know of, ever has their CSS off.. – Josh Crozier Sep 23 '13 at 18:04
  • 2
    @JoshC Good point. You'd think google would still have there website work without CSS... especially because css is supposed to be for style and not functionality. – Arian Faurtosh Sep 23 '13 at 18:09
  • Whatever happened to CSS Naked Day? – BoltClock Sep 23 '13 at 18:34

5 Answers5

22

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:

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • 1
    Both `` and `` have been "reassigned" in the HTML5 spec as compared to what they used to be in HTML4. And for a while, they were in fact deprecated in HTML5. – Sean Ryan Sep 23 '13 at 18:52
4

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.

Sean Ryan
  • 6,048
  • 2
  • 25
  • 23
4

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.

David
  • 208,112
  • 36
  • 198
  • 279
0

If you are talking about SEO

Use <strong> should be SEO friendly too... (focus on the keywords)

and it's important !

Community
  • 1
  • 1
l2aelba
  • 21,591
  • 22
  • 102
  • 138
-1

I find that using <strong></strong> is the better approach than using <b> or inline styles.

nathanfirth
  • 27
  • 3