What's the difference between and , and ?

Answer 1

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 2

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

We use the <strong> tag for text which has high priority for SEO purposes like product name, company name etc, while <b> simple makes it bold.

Similarly, we use <em> for text which has high priority for SEO, while <i> to make the text simply italic.

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

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 6

I'm going to hazard a historical and practical hot take here:

Yes, according to specifications, <strong> had a semantic meaning in HTML4 and <b> had a strictly presentational meaning.

Yes, when HTML5 came along, new semantic meaning that was slightly different was introduced for b and i.

Yes, the W3C recommends — basically — TL,DR; don't use b and i.

You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages. You should not use b and i tags if there is a more descriptive and relevant tag available.

BUT:

The real world internet has massive loads of existing HTML that is never going to get updated. The real world internet has to account for content generated and copy and pasted between a vast network of software and CMS systems that all have different developer teams and were built in different eras.

So if you're writing HTML or building a system that writes HTML for other people — sure — definitely use <strong> instead of <b> to mean "strongly emphasized" because it's more semantically correct.

But really, the on-the-ground reality is that the semantic and stylistic meaning of <strong> and <b> have merged over time out of necessity.

If I'm building a CMS that allows any pasting of styled text, I need to plan both for people who are pasting in <b> and mean "strongly emphasized" and for people who are pasting in <strong> and mean "make this text bold". It might not be "right", but it's how the real world works at this moment in time.

And so, if I'm writing a stylesheet for that site, I'm probably going to end up writing some styles that look like this:

b,
strong {
  font-weight: 700;
  /* ... more styles here */
}

i,
em {
  font-style: italic;
  /* ... more styles here */
}

Or, I'm going to rely on the browser defaults, which do the same thing as the code above in every modern browser I know of.

Or, I might be one of probably millions of sites that use normalize.css, which takes care to ensure that b and strong are treated the same.

There's such a massive ocean of HTML out there in the world already that works off of this expectation, I just can't imagine that b will EVER be depreciated in favor of strong or that browsers will ever start displaying them differently by default.

So that's it. That's my hot take on semantics, history and the real world. Are b/i and strong/em the same? No. Will they probably both exist and be treated as identical in almost every situation until the collapse of modern civilization? I think, yes.