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.