What is the proper way to style text as italic?

Question

Apparently, the  tag no longer tells the browser to display text in italics, but rather that the enclosed text "is set off from the normal text for some reason":

The tag should represent a range of text with a different semantic meaning whose typical typographic representation is italicized. This means a browser will typically still display its contents in italic type, but is, by definition, no longer required to.

Following this new semantic interpretation of this tag, what is the proper way to style a range of text as italic?

i {font-style: italic}
i .italic {font-style: italic}
span .italic {font-style: italic}
... ?

Let's assume I want to style the text as italic for non-semantic reasons, e.g. for aesthetic purposes. For example, I might want to italicize the first three words in every chapter (instead of using the conventional small caps).

Please have a look http://stackoverflow.com/questions/2108318/css-html-what-is-the-correct-way-to-make-text-italic — Ramkee, May 23 '16 at 10:06
Thank you, @Ramkee. Unfortunately I can no longer delete my question, as there are answers. — , May 23 '16 at 10:16

score 0 · Answer 1 · answered May 23 '16 at 10:07

0

You can give a span class="divname" and give the "divname" a font-style:italic or use the p tag with the same class.

I use the p tag myself.

answered May 23 '16 at 10:07

Gordy Colonna

54
1
9

score 0 · Answer 2 · edited May 23 '16 at 10:17

i.italic {
  font-style: italic;
}

or

You should use different methods for different use cases:

If you want to emphasize a phrase use . The  tag has a new meaning in HTML5, representing "a span of text in an alternate voice or mood". So you should use this tag for things like thoughts/asides or idiomatic phrases. The spec also suggests ship names (but no longer suggests book/song/movie names; use <cite> for that instead).

If the italicised text is part of a larger context, say an introductory paragraph, you should attach the CSS style to the larger element.

p.intro {
  font-style: italic;
}

Penny Liu · Answer 3 · 2020-01-10T09:01:34.223

0

What about <dfn> or  tag. Both can make text appear italicized.

dfn,
em {
  color: red;
}

Demand for the creation of <dfn>right-to-left</dfn> (RTL) websites has grown over the years due to the fact that <em>Arabic</em> is the 4th most popular language globally.

edited Jan 10 '20 at 09:01

answered Jan 09 '20 at 08:52

Penny Liu

15,447
5
79
98

What is the proper way to style text as italic?

3 Answers3