HTML and CSS Reference
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,
<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>).
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.
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.
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 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
<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: