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

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.

Italic Text 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.

Italic Text 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.