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

OK, the first thing to note is that has been deprecated, and shouldn't be used has not been deprecated, but I still do not recommend using it—see the comments for details. This is because it goes entirely against keeping presentation in the presentation layer, which you've pointed out. Similarly, seems to break the mold too.

So now we have two real ways of doing things: and . Remember that em stands for emphasis. When you wish to apply emphasis to a word, phrase or sentence, stick it in tags regardless of whether you want italics or not. If you want to change the styling in some other way, use CSS: em { font-weight: bold; font-style: normal; }. Of course, you can also apply a class to the tag: if you decide you want certain emphasised phrases to show up in red, give them a class and add it to the CSS:

Fancy some shiny text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

If you're applying italics for some other reason, go with the other method and give the section a class. That way, you can change its styling whenever you want without adjusting the HTML. In your example, footnotes should not be emphasised—in fact, they should be de-emphasised, as the point of a footnote is to show unimportant but interesting or useful information. In this case, you're much better off applying a class to the footnote and making it look like one in the presentation layer—the CSS.