HTML Italic

We use the HTML <i> tag or the HTML <em> tag to make the text italic.

HTML <i> Tag

The HTML <i> tag is a physical tag used to make the text italic. It is used to indicate foreign text, scientific nomenclature, thoughts, etc.

<p> This text is <i>italic</i>.</p>

Browser Output

HTML <em> Tag

The HTML <em> tag is a semantic tag that is used to signify that the text inside the tag is being emphasized. It is a semantic tag as opposed to <i> which doesn't hold any semantic meaning.

<p> This text is <em>emphasized</em>.</p>

Browser Output

Usage of HTML <i> tag

The <i> tag is a presentational tag, it is mostly used to:

1. represent text in another language. For example,

<p> The Foreigner said <i>Bonjour cher ami </i>, which means 'Hello dear friend' in French. </p>

Browser Output

2. represent words or phrases used as terms. For example,

<p> The words <i>the</i>, <i>a</i> and <i>an</i> are articles. </p>
<p> This is an example of an <i>idiom.</i> </p>

Browser Output

3. represent scientific names of animals, plants, etc. For example,

<p> The scientific name for cow is <i>Bos indicus.</i></p>

Browser Output

4. represent someone's thoughts. For example,

<p>Ram thought to himself, <i>Can I learn to code?</i></p>

Browser Output

HTML <em> Tag Vs HTML <i> Tag

There is no difference in how <i> and <em> tag renders on the browser. For example,

<p>Do not enter the tiger enclosure <i>under any circumstances</i>.</p>
<p>My teachers <em>heavily</em> emphasize studying.</p>

Browser Output

Both <em> and <i> make the font italic. However, <em> tag is a semantic tag that indicates that the text inside the tag is spoken with a stressed emphasis when compared to surrounding texts. Screen Readers will also emphasize text inside the <em> tag. Whereas the <i> tag only make the text italic.

Note: For purely styling purposes, it is recommended to use the CSS property font-style.