title: CSS/HTML: What is the correct way to make text italic?
body: <p>What is the <strong><em>correct</em></strong> way to make text italic? I have seen the following four approaches:</p>
  
  <pre><code>&lt;i&gt;Italic Text&lt;/i&gt;
  
  &lt;em&gt;Italic Text&lt;/em&gt;
  
  &lt;span class="italic"&gt;Italic Text&lt;/span&gt;
  
  &lt;span class="footnote"&gt;Italic Text&lt;/span&gt;
  </code></pre>
  
  <hr>
  
  <h1><code>&lt;i&gt;</code></h1>
  
  <p>This is the "old way". <code>&lt;i&gt;</code> 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.</p>
  
  <hr>
  
  <h1><code>&lt;em&gt;</code></h1>
  
  <p>This uses semantic mark up for purely presentational purposes. It just happens that <code>&lt;em&gt;</code> by default renders text in italic and so it is often used by those who are aware that <code>&lt;i&gt;</code> 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.</p>
  
  <hr>
  
  <h1><code>&lt;span class="italic"&gt;</code></h1>
  
  <p>This 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 <code>&lt;i&gt;</code>. 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.</p>
  
  <hr>
  
  <h1><code>&lt;span class="footnote"&gt;</code></h1>
  
  <p>This uses a CSS class for semantics. So far this appears to be the best way but it actually has two problems.</p>
  
  <ol>
  <li><p>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.</p></li>
  <li><p>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 <code>&lt;em&gt;</code> but avoids these problems?</p></li>
  </ol>
  
  <hr>
  
  <h1>Summary</h1>
  
  <p>It appears 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. </p>
  
  <p>Furthermore, the desire to separate style from structure has led CSS to be touted as a replacement to <code>&lt;i&gt;</code> when there are occasions when this would actually be less useful. So this leaves me back with the humble <code>&lt;i&gt;</code> tag and wondering whether this train of thought is the reason why it is left in the HTML5 spec?</p>
  
  <p>Are there any good blog posts or articles on this subject as well? Perhaps by those involved in the decision to retain/create the <code>&lt;i&gt;</code> tag?</p>