What's the Difference Between ≪B≫ and ≪Strong≫, ≪I≫ and ≪Em≫

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

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

As the author writes in a 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. 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) or be represented by an underline (since you can't bold a bold) on a Palm Pilot.

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 (e.g., "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 (e.g., "this text should be bold").

What is the difference between strong and em tags?

Yeah, the definition of what ‘strong emphasis’ is compared to just ‘emphasis’ is pretty woolly. The only standard definition would be “it's emphasised, but more!!”.

Personally I use <em> for normal emphasis where you'd read the emphasised word in a different tone of voice, and <strong> for that thing where you take key words and phrases to pick them out of the text to help people skimming the text pick out the subjects.

This isn't a standard interpretation, but it makes some sense and rendered appropriately by the default italic/bold styles. Whatever you do, be consistent.

When to use strong and when to use b?

How can we know when client want to
give emphasis to text and when he just
want to make text bold for
presentation/aesthetic purpose?

Read the client's text with understanding.

• use <strong> when the context says that the bold text is more important than the other (and it is inline)
• use <b> if it just should be bold (even in database, feed reader or without stylesheets). In this case boldness may be used to catch the readers eye.

When in doubt, ask the client what did he meant.

To save you and yourself a hassle, ask the client to use formatting styles in his editor. This is very useful feature, pity that there few people who do know what for this feature is.

Edit:

This is strong and this is bold. Any difference?

All the problems begin here. If the strong were by default colored RED (no red markup on SO), and normal weight, there would be no questions like this.

Is there any difference between b tag and strong tag in html

it's really all about semantic HTML.

<b/>

tag doesn't tell you anything about the content, and is thus not a semantic representation of your content.

<strong> 

on the other hand gives you an indication about the semantic meaning of the item you're putting the tag around. Same goes with

<i> and <em>. 

strong vs. font-weight:bold & em vs. font-style:italic

HTML represents meaning; CSS represents appearance. How you mark up text in a document is not determined by how that text appears on screen, but simply what it means. As another example, some other HTML elements, like headings, are styled font-weight: bold by default, but they are marked up using <h1>–<h6>, not <strong> or <b>.

In HTML5, you use <strong> to indicate important parts of a sentence, for example:

<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials.

And you use <em> to indicate linguistic stress, for example:

<p>A Gentleman: I suppose he does. But there's no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.

These elements are semantic elements that just happen to have bold and italic representations by default, but you can style them however you like. For example, in the <em> sample above (dialogue from the opening scene of BioShock Infinite), you could represent stress emphasis in uppercase instead of italics, but the functional purpose of the <em> element remains the same — to change the context of a sentence by emphasizing specific words or phrases over others:

em {
    font-style: normal;
    text-transform: uppercase;
}

em {
    font-style: normal;
    text-transform: uppercase;
}

p {
    line-height: 1.5;
    margin: 0;
}

<p>A Gentleman: I suppose he does. But there's no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.