Italics in HTML

The <i> tag is traditionally used to display text in italics.

In HTML 5, it is mainly used to highlight a word or expression from a different register: technical terms, foreign language words, work titles, etc.

Structure and syntax of the <i> tag

Basic structure and syntax

The <i> tag is a container tag (also called a paired tag). It consists of:

• an opening tag <i>;
• a closing tag </i>.

Generic example:

<i>[Text to be italicized]</i>

Usage example

Let's take a real example:

<p>The term <i>responsive design</i> is essential today.</p>

The words "responsive design" will appear in italics to emphasize the specialized English term. 😬

Attributes

The <i> tag accepts HTML global attributes: class, id, style, title, etc.

Difference with other similar tags

• <em>: adds semantic emphasis (voice reading, accessibility); visually italic by default but mainly serves to emphasize the importance of a word.
• <b>: makes text bold to catch the eye without semantic emphasis.
• <strong>: indicates text of particular importance (hierarchy, warning), visually rendered in bold.

Best practices

Reserve <i> for passages that should represent a different voice or style: book titles, scientific Latin, foreign terms, icons (via icon fonts), inner thoughts, etc.

To emphasize the importance of a word or intonation in your sentence, prefer the <em> tag.

Browser compatibility

The <i> tag is supported by 100% of modern and legacy browsers; it has existed since the very first versions of HTML.