(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66923408-1', 'auto'); ga('send', 'pageview');

<i> vs. <em>

The <i> element makes the surrounded text display as italic. The <em> element indicates textual emphasis, which is communicated as italic-styled text. So what's the difference? The <em> element means something, while the <i> element does not mean anything at all other than that the text should be italicized. So, when should you use one and when the other? There are few, if any, hard-and-fast rules, but generally speaking, if you want emphaisze some text, you should use the <em> element. On the other hand, if italics is only matter of style (e.g., Latin typographical shorthand) you may prefer to use the <i> element.

And don't forget <dfn>

The definition element (<dfn>), which is used to markup a word or phrase that is defined in the surrounding text, also styles the text as italics by default. The rules for using this element, instead of <i>, are much more straightforward, though. It should only be used when marking up a word that is being defined.

Long-form italics

Sometimes it is desirable to set off several lines of text with italics. This might be a shorrt introduction to content, a note to the reader, “fine print” of one sort or another. You should generally avoid the <i> element here as well. The <i> element is essentially a typographical element, and is inline (not block). This means that it should be used to mark up a few words or a phrase in a larger context. If you want to set a whole paragraph as italics, give it a particular class or id and use CSS.

Adam Wood
Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for i

All
All
All
All
All
All
shares