We use the HTML
<i> tag or the HTML
<em> tag to make the text italic.
HTML <i> Tag
<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>
HTML <em> Tag
<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>
Usage of HTML <i> tag
<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>
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>
3. represent scientific names of animals, plants, etc. For example,
<p> The scientific name for cow is <i>Bos indicus.</i></p>
4. represent someone's thoughts. For example,
<p>Ram thought to himself, <i>Can I learn to code?</i></p>
HTML <em> Tag Vs HTML <i> Tag
There is no difference in how
<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>
<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