September 6, 2012

Bold, italic, em and strong. Understanding the difference between these HTML tags

By Donald Ritchie

If you write HTML code, you're almost certainly familiar with the b and i tags, and probably the em and strong tags too. Between them, these tags are used to add emphasis or "strength" to your text in various ways. But do you know the differences between them? And which one you should use in a given situation?

The correct use of these tags can be confusing. Let's look at each of them in turn.

The em tag

In the em tag, the "em" stands for "emphasized". You use it when you want to stress a particular thought or idea. Visual browsers normally render emphasized text in italics; a screen reader might recite the text slightly more slowly or loudly than the words which surround it.

Here's an example:

The route is perfectly safe provided you stay on the trail. Above all, <em>do not walk on the firing range</em>.

Sometimes, you need to emphasize the text, not to make it stand out, but to clarify the meaning. For example, if I put up a sign saying "Pick your own strawberries", I am inviting you to buy strawberries from me, on the understanding that you pick them yourself. But if I say "Pick your <em>own</em> strawberries", I'm telling you to leave my fruit alone.

The i tag

The i tag also causes text to be rendered in italics, but in this case it’s for stylistic purposes rather than to add emphasis. You use i to indicate a different voice or mood, or to separate a phrase or word from the normal flow of text.

The tag is often also used for the titles of films, books and works or art; for the names of ships; for short foreign phrases; and in certain specialized uses, such as mathematical theorems and biological nomenclature. But note that all these uses are a matter of style; they're not hard-and-fast rules.

A couple of examples:

He passed the time by reciting <i>The Shooting of Dan McGrew</i>.

Despite losing every match, we retained our <i>esprit de corps</i>.




The strong tag

The strong tag is used to indicate the relative importance of a piece of text. Visual browsers commonly show such text in bold, but other devices might render it in other ways.

One common use is to make a word or phrase stand out, so as to emphasize the structure of the text, as in this example:

<strong>Ingredients:</strong> 3 large potatoes, 1 cup flour, ¼ cup butter. <strong>Method:</strong> Boil the potatoes in water until soft. Drain, then add the flour …

In theory, the tag can be nested. Text that is deep in the nesting hierarchy is considered more important than text higher up. In practice, this won't affect the way the text is rendered (by default) by the browser, although you can, of course, create your own CSS rules to handle this situation.

The b tag

The b tag causes text to be rendered in bold. Unlike with strong, it does so without implying any difference in meaning or importance.

Common uses include product names, keywords in a document abstract, and terms that don't themselves fit in with the normal flow of the text. An example of this latter usage:

In SQL, you can filter the results of your query by using a <b>where</b> clause.

You can see more examples on this very page, where I've used b to make the names of the tags stand out.

In summary

The main thing to remember is that b and i help determine the way that text is displayed, whereas em and strong affect the meaning of the text. While it’s important to keep these rules in mind, you don't have to be over-zealous in applying them. It's not going to ruin your website if you occasionally get them wrong.

The latest draft of the HTML5 standard is more specific about the use of these tags than previous versions. For more information, see HTML5 differences from HTML4.

No comments:

Post a Comment