<strong> and <em> vs. <b> and <i>

The HTML tags <strong> and <em> are often used incorrectly to produce bold and italic text. Although <strong> does render as bold in most browsers and <em> does render mostly as italics, and even though some web design software produces code using these tags for this purpose, it is none-the-less incorrrect usage.

We must remember that HTML is first and foremost a mark-up language. Display, or layout, is actually a secondary consideration best handled by CSS. Both <strong> and <em> belong to special group of tags known as phrase elements. These tags are not about display but rather about the relative importance, often called weight, of certain text within the document. Thus this has to do with HTML's role as a mark-up language and not its current usage for page layout.

<strong> is used to specify text that has a strong importance in the document, more so than the bulk of other text. This could be useful in designating certain text as meaningful for search functions and other purposes. <em> is used to apply an enhanced emphasis to a portion of text. This could, perhaps, be useful for devices that speak text for the visually impared.

Neither tag really has anything to do with the way the document is going to look when viewed in a browser and there is no guarantee that browser designers will continue to have these tags show their enclosed text in the same manner they do now, or that one particular browser will display text enclosed in strong or emphasis tags in the same way as another browser. Since these tags are not about display there is nothing in the HTML standard to suggest they must be shown in any particular way. Using these tags for visual effect is done with the risk that your document will not look the same in all browsers and may look different in the future in any browser.

The proper tag pair (or element) to use when you want bold text is <b> ... </b>, or the CSS parameter: font-weight: bold, and the proper element to use for italic text is <i> ... </i>,. or the CSS parameter: font-syle: italic.

It's always the right time to use good code!

[ back | top ]