Italics in HTML

In English, italics are used to stylistically set off particular words from the surrounding text, for any of a number of reasons. Best practice in HTML, however, is to mark up what an element means rather than what it looks like. Using <i> indiscriminately for italics defeats this purpose. Instead, HTML offers several tags to cover specific uses of italics. In most browsers, all the following tags will be styled in italics by default.

Specially emphasized words and phrases: <em>.1 (Don’t use this as an all-purpose substitute for <i> – not all italics are for emphasis.)

The real question is <em>how</em> it happened, not <em>when</em>.

Mathematical variables and constants: <var>. (MathML may be preferable for complex equations, but <var> is useful when referring to variables in text, or for simple mathematical expressions.)2

The number 4<var>p</var> + <var>q</var> is prime.

Titles of works – from books to films to paintings to court cases: <cite>. This tag’s name is misleading! It’s only meant to be used for a work’s title, and it needn’t be part of a full citation. According to the specification, “This can be a work that is being quoted or referenced in detail (i.e., a citation), or it can just be a work that is mentioned in passing.”3

the court’s ruling in <cite>Entick v. Carrington</cite>

Pierce, Tamora, <cite>Wild Magic</cite> (New York: Atheneum Books, 1992).

Technical or specialized terms being defined: <dfn>.4 These are normally italicized on first occurrence only.

A <dfn>user agent</dfn> is software which enables users to access Web content. User agents include Web browsers, media players and assistive tools such as screen readers.

Other common uses of italics don’t have dedicated tags. For these, <i> is still appropriate; it’s designated for “a span of text in an alternate voice or mood, or otherwise offset from the normal prose”.5 If desired, add classes so that specific uses of italics can be targeted in a stylesheet – I suggest some options for these below.

Words and phrases in other languages: <i> with the lang attribute.

Her <i lang="fr">joie de vivre</i> was unmistakable.

Names of ships and other vessels: perhaps <i class="vessel">.

H.M.S. <i class="vessel">Narwhal</i>’s crew

Biological genus and species names: these should probably be marked up as Latin (even if it is sometimes rather bizarre neo-Latin), using <i lang="la">. If a class is also needed, consider "binom" (for binomial name) or "bio".

the domestic sheep, <i lang="la" class="binom">Ovis aries</i>

Thoughts expressed as quasi-dialogue, especially in fiction: perhaps <i class="thought">.

<i class="thought">Here we go again!</i> thought Erin, suppressing a sigh.

Words and letters referred to as words and letters: possibly <i class="mention">.

Don’t forget the <i class="mention">g</i> in <i class="mention">diaphragm</i>.

Signaling terms in captions, cross-references etc.: perhaps <i class="sig">.

Ms. Chepkirui (<i class="sig">above right</i>) with colleagues in 1998

games: <i class="sig">see</i> play; sports

One more tag deserves mention: <mark> is for “text in one document marked or highlighted for reference purposes, due to its relevance in another context”.6 For italics added in a quotation which were not present in the original source, <mark> could be appropriate. (The default styling of this element is usually not in italics, so use CSS to achieve the desired appearance.)

“[S]he writes about life, not just education, which may confuse you if you don’t yet realize <mark>they’re the same</mark> [italics mine].”