What's the difference between and , and ?

Answer 1

Use them only if using CSS style classes is for any reason unconvinient or impossible (like blog systems, allow only some tags to use in posts and eventually embedded styles). Another reason is support for very old browsers (some mobile devices?) or primitive search engines (that give points for <b> or <strong> tags, instead of analysing CSS styles).

If you can define CSS styles, use them.

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"

Analogy:

Both <strong> is to <b> and <em> is to <i>

as

"vehicle" is to "jeep"

Answer 3

<i>, <b>, <em> and <strong> tags are traditionally representational. But they have been given new semantic meaning in HTML5.

<i> and <b> was used for font style in HTML4. <i> was used for italic and <b> for bold. In HTML5 <i> tag has new semantic meaning of 'alternate voice or mood' and <b> tag has the meaning of stylistically offset.

Example uses of <i> tag are - taxonomic designation, technical term, idiomatic phrase from another language, transliteration, a thought, ship names in western texts. Such as -

<p><i>I hope this works</i>, he thought.</p>

Example uses of <b> tag are keywords in a document extract, product names in a review, actionable words in an interactive text driven software, article lead.

The following example paragraph is stylistically offset from the paragraphs that follow it.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em> and <strong> had the meaning of emphasis and strong emphasis in HTML4. But in HTML5 <em> means stressed emphasis and <strong> means strong importance.

In the following example there should be a linguistic change while reading the word before ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

In the same example we can use the <strong> tag as follows ..

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

to give importance on the event date.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Answer 4

As the others have stated, the difference is that <b> and <i> hardcode font styles, whereas <strong> and <em> dictate semantic meaning, with the font style (or speaking browser intonation, or what-have-you) to be determined at the time the text is rendered (or spoken).

You can think of this as a difference between a “physical” font style and a “logical” style, if you will. At some later time, you may wish to change the way <strong> and <em> text are displayed, say, by altering properties in a style sheet to add color and size changes, or even to use different font faces entirely. If you've used “logical” markup instead of hardcoded “physical” markup, then you can simply change the display properties in one place each in your style sheet, and then all of the pages that reference that style sheet get changed automatically, without ever having to edit them.

Pretty slick, huh?

This is also the rationale behind defining sub-styles (referenced using the style= property in text tags) for paragraphs, table cells, header text, captions, etc., and using <div> tags. You can define physical representation for your logical styles in the style sheet, and the changes are automatically reflected in the web pages that reference that style sheet. Want a different representation for source code? Redefine the font, size, weight, spacing, etc. for your "code" style.

If you use XHTML, you can even define your own semantic tags, and your style sheet would do the conversions to physical font styles and layouts for you.