Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 128

Replace i with em or CSS
Change all i elements into em , span , or the equivalent semantic element.
<i>Literally</i> should <i>not</i> be used to emphasize a
phrase. (<i>Strunk and White, Elements of Style,
p. 52</i>).
<span class="wordasword">Literally</span> should
<em>not</em> be used to emphasize a phrase.
(<cite>Strunk and White, Elements of Style, p. 52</cite>).
Motivation
The i element is not allowed in XHTML strict. It describes appearance, not meaning, and it does not work in
non-GUI browsers such as Lynx or screen readers. It should be replaced by more descriptive semantic markup.
Sometimes that's an em element, but surprisingly often it's something else.
Potential Trade-offs
The very oldest browsers may not recognize the CSS rules. However, even the first and buggiest browsers that
supported CSS at all supported this much. The em element is supported by all browsers back to Mosaic 1.0.
Mechanics
Simple validation with the strict DTD will locate all the i elements. That's not hard. Alternatively, you can just
do a quick search for </i> to find them all.
If you're willing to assert that the only reason you ever used the i element was for emphasis, you can just
replace these with em tags. However, that's actually not common.
Many sites use the i element purely as a presentational effect, without meaning a whole lot. If this is the case,
replace it with CSS. For example, change this:
<li><i>JavaOne</i></li>
into this:
<li style="font-style: italic">JavaOne</li>
You may wish to use a class or id attribute so that you can place the style information in an external
stylesheet instead:
<li class="conference" id="javaone07">JavaOne</li>
If necessary, you can introduce an extra span element to hold the style , class , and/or id attributes: