When to use <b>, <strong>, <i> and <em>, and how to use them correctly

With the newest HTML 5 specification, there are lots of tags to format and mark portions of inline text to choose from. This sure causes some confusion, such as for the <bold> and <emphasis> tags. Which tag should you use, when should you use it and why? In the following lines, I will address the issue of <b> vs. <strong> vs. <i> vs. <em>.

One very important thing to remember, which holds true for all of those elements, is that none of them actually defines the typographic appearance of text. In the early days of HTML, the tags <i> (italics) and <b> (bold) were used to style text, that is, to define how their content looks. On first glance, this hasn't changed today - all major browsers still support these tags and format text accordingly. But if we take a look under the hood, fundamental things have changed. In the current HTML 5 specification, these tags define the semantic meaning, not the appearance of text portions. The HTML specification merely recommends to the browser how the text should be styled, but this is not part of their actual definition. For example, all major browsers display text within the <strong> element in bold letters by default, but they could as well use underlining. In theory, you cannot make sure you'll get a certain typographic appearance. If you want to make absolutely sure that a text portion is displayed in bold or italic letters, use CSS.

To be more specific, I'm going to present you each tag with a short description and some examples, so it's easy to know when to use which tag and why.

The <b> tag

According to the W3C definition:

"The b element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text; for example, keywords in a document abstract, or product names in a review."

In the early days of HTML, the <b> tag was used to designate bold text. This is no longer true, there is a subtle, but important difference: It is now used for text for which the conventional typographic presentation is bold text. The text does not necessarily have to be bold, it is merely a recommendation which all major browsers follow. This is the least semantic of all tags. Its sole function is to mark text which should visually differ from their surroundings. A screen reader might, but not necessarily have to, pronounce the words with an added emphasis. Use the <b> tag to mark text which should, for whatever reason, look different than the rest.

Examples

• "The notebook boasts a HD 4000 graphics processor"
• "The first words of articles in magazines are sometimes printed in bold"

When to use

To define text which should be typographically set off from its surroundings and which would be typically represented with bold text

When not to use

To define text which should be more important, more emphasized or pronounced differently compared to its surroundings. For this purpose, use the <strong> and <em> tags.

The <strong> tag

According to the W3C definition:

"The strong element represents a span of text with strong importance."

As opposed to the <b> tag, the <strong> tag has a semantic meaning. It defines text which is more important than other text, while the <b> tag merely defines text which should look different than other text. A person or screen reader would pronounce its content with an emphasis. A browser will typically, but is not obliged to, render the text in bold letters.

Examples:

• "Warning! This substance is hazardrous and potentially life-threatening!"
• "Update: The discounted price is no longer valid."

When to use

To define text which is semantically more important than its surroundings

When not to use

To define text which is not significantly more important than its surroundings. For text that should be printed in bold letters, use the <b> tag.

The <i> tag

According to the W3C definition:

"The i element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is italic text; for example, a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name."

Examples:

• "The Queen Mary sailed last night"
  Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary.
• "The word the is an article"

When to use

To define text which should be typographically set off compared to its surroundings, and which would typically be represented in italic letters

When not to use

To define text with stronger importance or emphasis. Use the <strong> and <em> tags for this purpose.

The <em> tag

According to the W3C definition:

"The em element represents a span of text with emphatic stress."

The <em> emphasizes text which would typically be pronounced with a stress. If you're not use whether to use this tag, speak a sentence to yourself, listen to your voice and see if there is an audible emphasis on certain words. If yes, they're a candidate to be labelled as emphasized. A person or software reading the text would pronounce its content with an emphasis. It is rendered in italics by all major browsers, however this is not a rule, just a default convention. You may as well use CSS to render it in bold letters.

Examples:

• "Just do it already!"
• "We had to do something about it"

When to use

To define text which would be typically pronounced with a stress

When not to use

To define text which should be merely typographically set off from its surroundings, such as bold or italics. Use the <i> and <b> tags for this purpose.