What's the difference between <b> and <strong>, <i> and <em>?

Question

What's the difference between <b> and <strong>, <i> and <em> in HTML/XHTML? When should you use each?

Answer 1

B and I are deprecated, along with FONT.

Here's a simple post on it.

Answer 2

<b> and <i> are explicit - they specify bold and italic respectively.

<strong> and <em> are semantic - they specify that the enclosed text should be "strong" or "emphasised" in some way, usually bold and italic, but allow for the actual styling to be controlled via CSS. Hence these are preferred in modern web pages.

Answer 3

<strong> and <em> add extra semantic meaning to your document. It just so happens that they also give a bold and italic style to your text.

You could of course override their styling with CSS.

<b> and <i> on the other hand only apply font styling and should no longer be used. (Because you're supposed to format with CSS, and if the text was actually important then you would probably make it "strong" or "emphasised" anyway!)

Hope that makes sense.

Answer 4

<b> and <i> should be avoided because they describe the style of the text. Instead, use <strong> and <em> because that describes the semantics (the meaning) of the text.

As with all things in HTML, you should be thinking not about how you want it to look, but what you actually mean. Sure, it might just be bold and italics to you, but not to a screen reader.

Answer 5

"They have the same effect. However, XHTML, a cleaner, newer version of HTML, recommends the use of the <strong> tag. Strong is better because it is easier to read - its meaning is clearer. Additionally, <strong> conveys a meaning - showing the text strongly - while <b> (for bold) conveys a method - bolding the text. With strong, your code still makes sense if you use CSS stylesheets to change what the methods of making the text strong is.

The same goes for the difference between <i> and <em> ".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Answer 6

b or i means you want the text to be rendered as bold or italics. strong or em means you want the text to be rendered in a way that the user understands as "important". The default is to render strong as bold and em as italics, but some other cultures might use a different mapping.

Like strings in a program, b and i would be "hard coded" while strong and em would be "localized".

Answer 7

As others have said <b> and <i> are explicit (i.e. "make this text bold"), whereas <strong> and <em> are semantic (i.e. "this text should be emphasised").

In the context of a modern web-browser, it's difficult to see the difference (they both appear to produce the same result, right?), but think about screen readers for the visually impaired. If a screen-reader came across an <i> tag, it wouldn't know what to do. But if it comes across a <em> tag, it knows that whatever is within should be emphasised to the listener. And therein you get the practical difference.

Answer 8

They have the same effect on normal web browser rendering engines, but there is a fundamental difference between them.

As the author writes in this discussion list post:

Think of three different situations:

• web browsers
• blind people
• mobile phones

"Bold" is a style - when you say "bold a word", people basically know that it means to add more, let's say "ink" around the letters until they stand out more amongst the rest of the letters.

That, unfortunately, means nothing to a blind person. And on mobile phones and other PDAs, text is already bold because screen resolution is very small. You can't bold a bold without screwing something up.

<b> is a style - we know what "bold" is supposed to look like.

<strong> however is an indication of how something should be understood. "Strong" could (and often does) mean "bold" in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people). And strong on a Palm Pilot may be an underline (since you can't bold a bold).

HTML was never meant to be about styles. Do some searches for "Tim Berners-Lee" and "the semantic web". <strong> is semantic - it describes the text it surrounds ("this text should be stronger than the rest of the text you've displayed") as opposed to describing how the text it surrounds should be displayed ("this text should be bold").

Answer 9

<b> and <i> are both related to style, whereas <em> and <strong> are semantic. In HTML 4, the first are classified as font style elements, and the latter as phrase elements.

As you indicated correctly, <i> and <em> are often considered similar, because browsers often render both in italics. But according to the specifications, <em> indicates emphasis and <strong> indicates stronger emphasis, which is quite clear, but often misinterpreted. On the other hand, the distinction between when to use <i> or <b> is really a matter of style.

Answer 10

You shouldn't use <b> and <i> any longer. They were introduced for "layouting" the page and layout is nothing that should be done in HTML, it should be done in CSS. These tags are deprecated in HTML4 and may as well vanish in HTML5/6. Since you can use CSS to declare any tag being bold or italics, there is no need to have extra tags for that.

<em> and <strong> on the other hand only says that something is "emphasized" or "strongly emphasized", it leaves it completely open to the brother how to render it. Most browsers will render em italic and strong bold, but they are not forced to do that (they may use different colors, font sizes, fonts, whatever). You can use CSS to change the behavior the way you desire. You can make em bold if you like and strong bold and red for example.

Answer 11

While <strong> and <em> are of course more semantically correct, there seem definite legitimate reasons to use the <b> and <i> tags for customer-written content. In such content, words or phrases may be bolded or italicized and it is generally not up to us to analyze the semantic reasoning for such bolding or italicizing. Further, such content may refer to bolded and italicized words and phrases to convey a specific meaning. An example would be an english exam question which instructs a student to replace the bolded word.

Answer 12

I do agree with JamShady. Yes, there is not at all a difference in the appearence of the text with i,cite and em. The difference only lie in the semantic of the tags. i and b gives importance to the appearence or look of the particular text. But em and strong gives importance to the meaning of the text. Thank you for the oppotunity.

Answer 13

I use both <strong> and <b>, actually, for exactly the reasons mentioned in this thread of responses. There are times when bold-facing some text simply looks better, but it isn't, necessarily, semantically more important than the rest of the sentence. Here's an example from a page I'm working on right now:

"Retrieves <strong>all</strong> books about <b>lacrosse</b>."

In that sentence, the word "all" is very important, and "lacrosse" less so--I merely wanted it bold because it represents a search term, so I wanted some visual separation. If you're viewing the page with a screen reader, I really don't think it needs to go out of the way to emphasize the word "lacrosse".

I would tend to imagine that most web developers use one of the other, but both are fine--<b> is most definitely not deprecated, as some people have claimed. For me, it's just a fine line between visual appeal and meaning.