What's the difference between an HTML <i> tag and css "font-style:italic"?

Question

Is there a difference in how the browser would display between:

<i>test</i>

<span style="font-style:italic">test</span>

Is one preferable over the other? Are there different scenarios for each?

A quick jsfiddle doesn't show any visual difference.

Answer 1

<i> content </i> is a markup tag to show content in web browser, font-style is a property to style your content (headings, paragraphs, list etc). In font-style: italic, italic is a value of font-style property to show content/text in italic style at browser. Normally, Ui/Ux designer use this <i></i> tag to show fonty icons (icons in font/text format, not images like jpeg,png,jpeg etc). But you can use this tag for any purpose as you need.

Answer 2

Pre-HTML5, there was no difference, neither in visuals nor semantics; i, like b, s and u, was a presentational element. This is in contrast to em, strong, del and ins respectively.

In HTML5, the i element has a specific meaning that happens to be represented visually as italicized text. It should not be used to represent just any text that happens to be in italics. In particular, it distinguishes itself from the em element, which represents stress emphasis (and, unlike i, doesn't necessarily have to be represented with italics). span remains a generic phrasing element that carries no meaning whatsoever.

Normally I would quote the spec here but I think MDN's summary is easier to understand:

The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

The spec still offers better examples though:

The examples below show uses of the i element:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

In the following example, a dream sequence is marked up using i elements.

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

Answer 3

both are same in properties. Both do the same thing. The only difference is that the one is using the HTML tag to apply italic property and other is using CSS property to apply the italic style.

Answer 4

The paragraph is taken from https://html.com/tags/i/#ixzz5VZbm6JhB

The HTML <i> element is used to differentiate words from the surrounding text by styling the marked text in italics without implying any added emphasis to the italicized words.

an Example here, here I want the word world to be in italic, so you can have an <i> tag surrounded.

<h1>Hello <i>World</i></h1>

When using CSS font-style:italic you need to be specific where the style be done.

like in the example.

h2{
    font-style:italic;
}

<h2>Hello World</h2>

So, what if you want to achieve the word world to be italic, you have to surround it in between span tag and make it italic using the CSS.

span{
    font-style:italic;
}

<h2>Hello <span>World</span></h2>

So, rather than doing it in CSS, HTML had given an option of <i> tag.

The i tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.

Answer 5

From w3schools:

In HTML 4.01, the tag was used to render text in italics. However, this is not necessarily the case with HTML5. Style sheets can be used to format the text inside the element.