CSS/HTML: What is the correct way to make text italic?

Question

What is the correct way to make text italic? I have seen the following four approaches:

Italic Text

I         


        

Answer 1

You should use different methods for different use cases:

1. If you want to emphasise a phrase, use <em>.
2. The <i> 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).
3. If the italicised text is part of a larger context, say an introductory paragraph, you should attach the CSS style to the larger element, i.e. p.intro { font-style: italic; }

Answer 2

Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.

If it has no special meaning, why does it need to be separated presentationally from the text preceding it? This run of text looks a bit weird, because I’ve italicised it for no reason.

I do take your point though. It’s not uncommon for designers to produce designs that vary visually, without varying meaningfully. I’ve seen this most often with boxes: designers will give us designs including boxes with various combinations of colours, corners, gradients and drop-shadows, with no relation between the styles, and the meaning of the content.

Because these are reasonably complex styles (with associated Internet Explorer issues) re-used in different places, we create classes like box-1, box-2, so that we can re-use the styles.

The specific example of making some text italic is too trivial to worry about though. Best leave minutiae like that for the Semantic Nutters to argue about.

Answer 3

TLDR

The correct way to make text italic is to ignore the problem until you get to the CSS, then style according to presentational semantics. The first two options you provided could be right depending on the circumstances. The last two are wrong.

Longer Explanation

Don't worry about presentation when writing the markup. Don't think in terms of italics. Think in terms of semantics. If it requires stress emphasis, then it's an em. If it's tangential to the main content, then it's an aside. Maybe it'll be bold, maybe it'll be italic, maybe it'll be fluorescent green. It doesn't matter when you're writing markup.

When you do get to the CSS, you might already have a semantic element that makes sense to put italics for all its occurrences in your site. em is a good example. But maybe you want all aside > ul > li on your site in italics. You have to separate thinking about the markup from thinking about the presentation.

As mentioned by DisgruntledGoat, i is semantic in HTML5. The semantics seem kind of narrow to me, though. Use will probably be rare.

The semantics of em have changed in HTML5 to stress emphasis. strong can be used to show importance as well. strong can be italic rather than bold if that's how you want to style it. Don't let the browser's stylesheet limit you. You can even use a reset stylesheet to help you stop thinking within the defaults. (Though there are some caveats.)

class="italic" is bad. Don't use it. It is not semantic and is not flexible at all. Presentation still has semantics, just a different kind from markup.

class="footnote" is emulating markup semantics and is incorrect as well. Your CSS for the footnote should not be completely unique to your footnote. Your site will look too messy if every part is styled differently. You should have some visual patterns scattered through your pages that you can turn into CSS classes. If your style for your footnotes and your blockquotes are very similar, then you should put the similarities into one class rather than repeat yourself over and over again. You might consider adopting the practices of OOCSS (links below).

Separation of concerns and semantics are big in HTML5. People often don't realize that the markup isn't the only place where semantics is important. There is content semantics (HTML), but there is also presentational semantics (CSS) and behavioral semantics (JavaScript) as well. They all have their own separate semantics that are important to pay attention to for maintainability and staying DRY.

OOCSS Resources

• Object Oriented CSS
• An Introduction To Object Oriented CSS (OOCSS)
• How to Write Object Oriented CSS
• Getting started with Object-Orientated CSS (OOCSS)
• Object-Oriented CSS: What, How, and Why
• Diving into Object Oriented CSS

Answer 4

HTML italic text displays the text in italic format.

<i>HTML italic text example</i>

The emphasis and strong elements can both be used to increase the importance of certain words or sentences.

<p>This is <em>emphasized </em> text format <em>example</em></p>

The emphasis tag should be used when you want to emphasize a point in your text and not necessarily when you want to italicize that text.

See this guide for more: HTML Text Formatting

Answer 5

Use <em> if you need some words/characters in italic in content without other styles. It also helps make content semantic.

text-style is better suited for multiple styles and no semantic need.

Answer 6

The i element is non-semantic, so for the screen readers, Googlebot, etc., it should be some kind of transparent (just like span or div elements). But it's not a good choice for the developer, because it joins the presentation layer with the structure layer - and that's a bad practice.

em element (strong as well) should be always used in a semantic context, not a presentation one. It has to be used whenever some word or sentence is important. Just for an example in the previous sentence, I should use em to put more emphasis on the 'should be always used' part. Browsers provides some default CSS properties for these elements, but you can and you're supposed to override the default values if your design requires this to keep the correct semantic meaning of these elements.

<span class="italic">Italic Text</span> is the most wrong way. First of all, it's inconvenient in use. Secondly, it suggest that the text should be italic. And the structure layer (HTML, XML, etc.) shouldn't ever do it. Presentation should be always kept separated from the structure.

<span class="footnote">Italic Text</span> seems to be the best way for a footnote. It doesn't suggest any presentation and just describes the markup. You can't predict what will happen in the feature. If a footnote will grow up in the feature, you might be forced to change its class name (to keep some logic in your code).

So whenever you've some important text, use em or strong to emphasis it. But remember that these elements are inline elements and shouldn't be used to emphasis large blocks of text.

Use CSS if you care only about how something looks like and always try to avoid any extra markup.