b Vs strong

There is a difference between using what are referred to as logical tags and tags that primarily affect visual layout.

If you use a <b> tag to make the text bold it does look bold.

If you use a <strong> tag to make the text bold it also looks bold in most browsers.

Stripped down to emphasize the important tags, the code for the two sentences above looks like this, with the significant tags in bright green:

If you use a <b><b></b> tag to make the text <b>bold</b> it does look <b>bold</b>.

If you use a <strong><strong></strong> tag to make the text <strong>bold</strong> it also looks <strong>bold</strong> in most browsers.

Similarly, if you use the <i> tag to make text italic, it does look italic. And if you use the <em> tag to make text italic, it does look italic in most browsers.

So why use <strong> instead of <b> to get the same effect when it takes longer to type? Why use <em> instead of <i> when they usually look the same?

The <strong> and <em> tags are "logical" tags. This means that they are used deliberately when the designer wants to add emphasis to particular words or phrases. Some screen readers may use a different inflection when they come across these tags to communicate the emphasis. The <b> and <i> tags are primarily for visual effect on a page when designing layout.

You can also use the <cite> tag at the beginning and end of a phrase. This is appropriate when citing a source without linking to it. Do not use it simply to make something look italic. Not all browsers render this material in italic text. It is more useful for browsers that are logically looking through your document to index references.<cite> Raggett on HTML 4, page 71</cite>

Use the <strong> and <em> tags when the content of your page requires that certain words or phrases be stressed. Use them sparingly or your page, much as you would use exclamation points ( ! ! ! ). If you are only highlighting words for a visual effect to assist in navigation use the <b> and <i> tags.