What’s the Differences Between <em> & <i> and <strong> & <b>

Web publishers and bloggers who do not only rely on WYSIWYG editor and do all the dirty work directly at HTML coding level will notice that to make a text appears in italic style, both em and i elements can be used, while to make a text appears in boldface, both strong and b elements can be used.

But what is the differences between the <em> and <i>, and <strong> and <b> elements? To make thing more confusing, the visual rendering of <em> and <strong> tags or <i> and <b> tags on web browser are exactly the same, where the text is printed in bold or italic in the later case.

Apparently, <em> and <strong> tags are used for logical purpose, while <i> and <b> tags are used for physical (visual) purpose.

In other word, <i> and <b> should be used purely for presentation and design only, where the text or data carries not special meaning or weight, as it carries no semantic meaning or metadata other than telling web browser to make the enclosed text italic or bold. Usage of i or b elements simply tells the browsers that the text should be styled as italic (for i) or bold (for b). Thus, it mainly meant for visual media which prints out the text.

Meanwhile, em element is used to emphasize the enclosed text so that browser knows the data within is special and should be emphasized. In most browser, the emphasized text is rendered in italic visually, though it’s not necessary. Other than <em>, <cite> (for citation) and <dfn> (for definition) is also rendered in italic style visually. So use <em> tag only on emphasized text instead of i element to allow browser to distinguish it from other form of text such as citations and definitions, or text which must be drawn in italic in the case where italic is not available.

Similarly for strong element, which carries metadata that indicates to web browser that the text contained within is special and has to be strongly emphasized. In most browser, the strongly emphasized text is rendered in bold-face visually, though it’s not necessary. Use <strong> tag on strongly emphasized text to allow browser to distinguish it from other text which must be drawn in boldface in the case where boldface is not available.

The different between <em> and <i>, and <strong> and <b> tags are more pronounced in speech aural browser. Visual browser presents emphasized and strongly emphasized text in italic and bold, while in speech browser, speech synthesizer user agents ca change the synthesis parameters,
such as volume, pitch and rate accordingly based on the tags used. Thus, em and strong elements also provide better interoperability across media.

The <em> and <strong> should be used whenever possible over <i> and <b>, and then are considered as more appropriate, meaningful elements for HTML, which is designed to be device and media independent.