What's the difference between and

Question

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

Answer 1

Here's a summary of definitions together with suggested usage:

<b> ...a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

<strong> ...now represents importance rather than strong emphasis.

<i> ...a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

<em> ...indicates emphasis.

(These are all direct quotes from W3C sources, with my emphasis added. See: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements and http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 for the originals)

Answer 2

<strong> and <em> are abstract (which is what people mean when they say it's semantic). <b> and <i> are specific ways of making something "strong" or "emphasized"

<strong> : <b> :: vehicle :: jeep

Answer 3

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

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.

Answer 6

You should try to avoid <b> and <i>. They were introduced for "layouting" the page (like the meanwhile removed font tag) and layout is nothing that should be done in HTML, it should be done in CSS (HTM == Structure, CSS == Layout). These tags may as well vanish in the future, after all you can just use CSS and span tags to make text bold/italic.

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