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

Question

This is not a noob question! What is the correct way to make text italic? It seems to me that we have the following options available to us when making text italic:

<i>Italic Text</i>
<em>Italic Text</em>
<span class="italic">Italic Text</span>
<span class="footnote">Italic Text</span>

The first example uses the old way. <i> has no semantic meaning and only conveys the presentational effect of making the text italic. As far as I can see, this is clearly wrong because this is non-semantic.

The second example uses semantic mark up for purely presentational purposes. It just happens that <em> by default renders text in italic and so it is often used by those who are aware that <i> should be avoided but who are unaware of its semantic meaning. Not all italic text is italic because it is emphasised. Sometimes, it can be the exact opposite, like a side note or a whisper.

The third example uses a CSS class to place presentation. This is often touted as the correct way but again, this seems wrong to me. This doesn't appear to convey any more semantic meaning that <i>. But, its proponents cry, it is much easier to change all your italic text later if you, say, wanted it bold. Yet this is not the case because I would then be left with a class called "italic" that rendered text bold. Furthermore, it is not clear why I would ever want to change all italic text on my website or at least we can think of cases in which this would not be desirable or necessary.

The fourth example uses a CSS class for semantics. So far this appears to be the best way but it has a number of problems. Firstly, not all text has sufficient meaning to warrant semantic markup. For example, is italicised text at the bottom of the page really a footnote? Or is it an aside? Or something else entirely. Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it. Secondly, semantic meaning can change when it is not present in sufficient strength. Lets say I went along with "footnote" based upon nothing more than the text being at the bottom of the page. What happens when a few months later I want to add more text at the bottom? It is no longer a footnote. How can we choose a semantic class that is less generic than <em> but avoids these problems?

I guess my problem is that the requirement of semantics seems to be overly burdensome in many instances where the desire to make something italic is not meant to carry semantic meaning. Furthermore, the desire to separate style from structure has led CSS to be touted as a replacement to <i> when there are occasions when this would actually be less useful. So this leaves me back with the humble <i> tag and wondering whether this train of thought is the reason why it is left in the HTML5 spec?

Are there any good blog posts or articles on this subject as well? Perhaps by those involved in the decision to retain/create the <i> tag?

Answer 1

I'm no expert but I'd say that if you really want to be semantic, you should use vocabularies (RDFa).

This should result in something like that:

<em property="italic" href="http://url/to/a/definition_of_italic"&gt; Your text </em>

em is used for the presentation (humans will see it in italic) and the property and href attributes are linking to a definition of what italic is (for machines).

You should check if there's a vocabulary for that kind of thing, maybe properties already exist.

More info about RDFa here: http://www.alistapart.com/articles/introduction-to-rdfa/

Answer 2

OK, the first thing to note is that <i> has been deprecated, and shouldn't be used <i> 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, <span class="italic"> seems to break the mold too.

So now we have two real ways of doing things: <em> and <span class="footnote">. Remember that em stands for emphasis. When you wish to apply emphasis to a word, phrase or sentence, stick it in <em> 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 <em> 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 <em class="special">shiny</em> 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.

Answer 3

Use if you need some words/chars italic in content without other styles. It also helps makes content semantic.

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

Answer 4

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 5

<i> is not wrong because it is non-semantic. It's wrong (usually) because it's presentational. Separation of concern means that presentional information should be conveyed with CSS.

Naming in general can be tricky to get right, and class names are no exception, but nevertheless it's what you have to do. If you're using italics to make a block stand out from the body text, then maybe a class name of "flow-distinctive" would be in order. Think about reuse: class names are for categorization - where else would you want to do the same thing? That should help you identify a suitable name.

<i> is included in HTML5, but it is given specific semantics. If the reason why you are marking something up as italic meets one of the semantics identified in the spec, it would be appropriate to use <i>. Otherwise not.

Answer 6

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 developer, because it joins presentation layer with structure layer - and that's a bad practice.

em element (strong as well) should be always used in semantic context, not 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 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 structure layer (HTML, XML, etc.) shuldn'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 just describes the mark-up. You can't predict what will happen in the feature. If footnote will grow up in the feature you might be forced to change its class name (to keep some logics 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 block of text.

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

PS. Sorry for my English. ;)

Answer 7

I think the answer is to use <em> when you intend emphasis.

If when reading the text to yourself, you find that you use a slightly different voice to emphasise a point, then it should use <em> because you would want a screen reader to do the same thing.

If it is purely a style thing, such as your designer has decided that all your <h2> headings would look better in italic Garamond, then there is no semantic reason to include it in the HTML and you should just alter the CSS for the appropriate elements.

I can't see any reason to use <i>, unless you specifically need to support some legacy browser with no CSS.

Answer 8

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 book/song/album/movie names.
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 9

I'd say use <em> to emphasize inline elements. Use a class for block elements like blocks of text. CSS or not, the text still has to be tagged. Whether its for semantics or for visual aid, I'm assuming you'd be using it for something meaningful...

If you're emphasizing text for ANY reason, you could use <em>, or a class that italicizes your text.

It's OK to break the rules sometimes!